canvas实现K-Means算法可视化执行过程效果代码-html代码-BFW代码库

canvas实现K-Means算法可视化执行过程效果代码

代码语言：html

所属分类：其他

代码描述：canvas实现K-Means算法可视化执行过程效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
</head>

<body>


    <div class="center">
        <article>
            <div class="social">

            </div>
            <h1 class="title">K-Means</h1>


            <div class="content">
                <div>


                    <p><button onclick="doStep()">Step</button></p>
                    <p><canvas id="canvas"></canvas></p>
                    <script>
                        var size = {x: 480, y:480};
                        var canvas = document.getElementById("canvas");
                        canvas.width = size.x;
                        canvas.height = size.y;
                        var TAU = Math.PI*2;
                        var draw = canvas.getContext("2d");
                        
                        var data = [{ label : "A", x : 2, y : 4 },
                        			{ label : "B", x : 7, y : 3 },
                        			{ label : "C", x : 3, y : 5 },
                        			{ label : "D", x : 5, y : 3 },
                        			{ label : "E", x : 7, y : 4 },
                        			{ label : "F", x : 6, y : 8 },
                        			{ label : "G", x : 6, y : 5 },
                        			{ label : "H", x : 8, y : 4 },
                        			{ label : "I", x : 2, y : 5 },
                        			{ label : "J", x : 3, y : 7 }];
                        
                        var dataMap = {};
                        for(var i = 0; i < data.length; i += 1)
                        	dataMap[data[i].label] = data[i];
                        
                        
                        var stepInterval = 0;
                        var state = {
                        	tick : 0,
                        	centers : []
                        };
                        
                        function clone(obj){
                        	var res = {};
                        	for(var i in obj)
                        		if(typeof(obj[i]) == "object")
                        			res[i] = clone(obj[i])
                        		else
                        			res[i] = obj[i];
                        	return res;
                        }
                        
                        function stop(){
                        	clearInterval(stepInterval);
                        }
                        
                        function reset(){
                        	state.tick = 0;
                        	state.centers = [{x:2,y:6}, {x:2,y:8}, {x:5,y:8}];
                        	for(var i = 0; i < state.centers.length; i += 1){
                        		state.centers[i].children = [];
                        	}
                        }
                        
                        function start(){
                        	stop();
                        	reset();
                        	stepInterval = setInterval(doStep, 1000);
                        }
                        
                        function render(state){
                        	var background = "#222",
                        		foreground = "#ddd";
                        
                        	draw.fillStyle = background;
                        	draw.fillRect(0,0,size.x,size.y);
                        
                        	draw.save();
                        
                        	draw.translate(10, size.y-10);
                        	draw.scale(46, -46);
                        
                        	draw.strokeStyle = foreground;
                        	draw.lineWidth = 0.07;
                        
                        	// axis
                        	draw.beginPath();
                        	draw.moveTo(0,0); draw.lineTo(0, 10);
                        	draw.moveTo(0,0); draw.lineTo(10, 0);
                        	draw.stroke();
                        
                        	// grid
                        	draw.beginPath();
                        	draw.lineWidth = 0.01;
                        	for(var i = 0; i < 10; i += 1){
                        		draw.moveTo(i, -0.1); draw.lineTo(i, 10);
                        		draw.moveTo(-0.1, i); draw.lineTo(10, i);
                        	}
                        	draw.stroke();
                        
                        	draw.font = "bold 1px sans-serif";
                        	var radius = 0.3;
                        	for(var i = 0; i < data.length; i += 1){
                        		draw.fillStyle = foreground;
                        
          .........完整代码请登录后点击上方下载按钮下载查看