上一篇主要讲解了矩形柱状图,弧形和饼图的绘制,但是离我们的目标还是有点远,不要紧,我们基础api都还没有学习完,今天继续。
本节主要内容
- canvas画板制作
- 块的直线运动
- 粒子运动
- 线性渐变
- 径向渐变
- 文字渲染
- 阴影
canvas画板
canvas画板简单来说就是设置一块画布在上面自由画线,看看效果图
document.addEventListener('DOMContentLoaded',function(){
var canvas = document.querySelector("#canvas");
var context = canvas.getContext("2d");
var oC = document.querySelector("#clear");
canvas.onmousedown = function(e){
context.beginPath();
context.moveTo(e.pageX,e.pageY);
document.onmousemove = function(e){
context.lineTo(e.pageX,e.pageY);
context.stroke();
};
document.onmouseup = function(){
document.onmousemove=null;
document.onmouseup=null;
};
};
oC.onclick=function(){
context.clearRect(0,0,canvas.width,canvas.height);
};
},false);
这个代码还是比较简单的,这里有一点需要讲讲就是清除画板功能。
canvas.clearRect(x,y,w,h);
x,y:画布的位置
w,h:清除的宽高
其实这里有一个非常重要的知识点:整个canvas的动画其实都是依赖clearRect这个api来实现的,其实在上一篇文章中的动态柱状图中其实已经使用过该api。但是这里我还是想举一个简单的例子来看看是如何实现运动的。
块的直线运动
看看效果图:
看这图片我们分析下:
1、首先绘制一个方块
2、动态改变块的绘制位置
直接代码实现:
var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
gd.beginPath();
var k=1;
function