第十日
此刻我的思想真的枯竭了
在Canvas里画随机圆形
鼠标移动，绘出随机颜色随机大小的圆形，有码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas Test</title>
</head>
<body style="margin:0;padding:0">
<canvas style="border:1px solid #c3c3c3;" id="myCanvas" width="800" height="600" onmousemove="get_location(event)" ></canvas>
<script type="text/javascript">
//Your browser does not support the canvas element.
var c = document.querySelector('#myCanvas');
var cxt = c.getContext('2d');
function get_location(e){
//cxt.clearRect(0,0,800,600);
x = e.clientX;
y = e.clientY;
var colors = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var color = '#';
var brush = Math.random()*30;
for (var i = 0; i < 6; i++) {
//取得0-15之间的随机整数
index = Math.round(Math.random() * 15);
color += colors[index];
}
cxt.fillStyle=color;
cxt.beginPath();
cxt.arc(x,y,brush,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
}
</script>
</body>
</html>
在过程中发现两个问题：
1，滚动鼠标后，y坐标获取位置有误
2，如何在点下并拖动鼠标后再绘制
原创文章，转载请注明： 转载自第十日
本文链接地址: 在Canvas里画随机圆形
Tags: Canvas, HTML5, JavaScript
你做成你们程序员的网站吧，不一定都是跟工作相关的。你需要什么，就添加什么，游戏，编程，生活，影视。。。。。。。什么都可以，只要是你们需要的