这几天自己在学习HTML5,看到很多新的元素,总感觉手痒痒,就想自己写一个,今天想起曾经一个项目里用的正在加载图案(spinner)是用的插件,所以自己就像要用canvas绘制一个。
初学HTML5,程序肯定有不完美的地方!!
思路就是绘制一个简单的图形,然后让图形以一个点为中心按一定的速率旋转!
添加canvas元素:
<canvas id="canvas" width="500" height="500" style="border:1px solid black;background:#484646">
您的浏览器版本太老,不支持这个控件
</canvas>
绘制图形:
效果如下:
这个很简单,相信用过canvas的都会绘制
//旋转时内圆的半径
var radiusinner = 60,
//旋转时外圆的半径
radiusoutter = 120,
//每一个花瓣的宽度
spinwidth = 30,
//花瓣的数量
spinnum = 12;
var canvas = document.getElementById("canvas");
var context2D = canvas.getContext("2d");
//为了方便,用于获取长方形的起点坐标
var s_height = radiusoutter - radiusinner - spinwidth;
var s_width = spinwidth;
var s_x = 0 - spinwidth/2
var s_y = 0 - (radiusoutter - s_width / 2);;
context2D.translate(radiusoutter, radiusoutter);//改变坐标系的坐标原点
//用于生成图案中的一个
function create() {
context2D.beginPath();
context2D.arc(0, s_y, s_width/2, 0, Math.PI * 2, true);
context2D.arc(0, s_y + s_height, s_width/2, 0, Math.PI * 2, true);
context2D.closePath();
context2D.fillStyle = "#fff";
context2D.fill();
context2D.fillRect(s_x, s_y, s_width, s_height);
}
我觉得这段程序中,对我学习影响最大的是改变坐标系坐标原点这个地方,最开始的时候,坐标系原点默认的是canvas控件的左上角,但是在图像旋转的时候,是已控件的左上角为参考的,而这里想要的是外圆的圆点处作为旋转的参考点,所以,提前将坐标系的圆点改变,这样方便下面的旋转。
旋转图形:
var snum = 0;
function move() {
context2D.clearRect(-120, -120, 500, 500);
snum = snum === spinnum ? 0 : snum;
snum++;
var angle = (snum * 360 / spinnum) * Math.PI / 180;
context2D.save();
context2D.rotate(angle);
create();
context2D.restore();
}
var i = setInterval(move, 30);
这样,就可以自定义完成一个简单的图形!