视频地址：慕课·canvas小球倒计时
代码下载请移步：github
演示地址：在线演示
一、canvas简介
canvas是HTML5中新加入的标签，但是其真正的控制却大多需要javascript来控制。在标签内可以写一些不支持HTML5的浏览器的提示文字，不用担心如果浏览器支持HTML5则标签内的文本不会显示。
示例：
<canvas id="canvas" >
您的浏览器不支持html5请使用现代浏览器。
</canvas>
提示：由于需要在javascript中获取该元素，所以需要给canvas设置id属性
二、canvas基础
在页面中声明canvas标签后就可以在javascript中获取并操作canvas画布啦。
<script type="text/javascript">
//页面默认调用函数
window.onload=function(){
//获取canvas标签元素
var canvas=document.getElementById('canvas');
//设置canvas宽、高
canvas.width=500;
canvas.height=500;
//获取2d上下文
var context=canvas.getContext('2d');
}
</script>
以上代码就是获取和初步设置cnavas属性的代码。在设置canvas的宽高时不建议添加单位，因为可以把canvas看作一张画布，设定宽、高时除了设定画布大小之外也需要设置画布的点密度，如果带单位时只能设置画布的大小，而如果不带单位除了设置画布大小外也同时设置了画布的点密度。
在获取到标签元素后如果要在画布中进行绘制还需要获取文件的上下文，可以获取2d、3d上下文，但是html5中推荐支持的是2d上下文，所以用2d上下文浏览器支持更好，而且大多数图形使用2d上下文已经够用。
三、canvas API简介
有了一张画布后我们就可以在画布上进行绘制啦。
- 绘制路径
可以使用moveTo(x,y)方法设置路径的起点，使用方法lineTo(x,y)设置绘制路径的终点，使用stroke()方法渲染路径。但是在我们连续绘制多条路径时会发现绘制的多条路径格式设置是相同的。因此为了避免绘制不同样式路径造成的不便可以在绘制路径前用beginPath()函数和closePath()函数把路径包裹起来，这样在重新绘制时就可以使用新的样式啦。
/*----------- draw line 1 --------------*/
context.beginPath();
context.moveTo(100,100);
context.lineTo(700,700);
context.lineTo(100,700);
context.lineTo(100,100);
context.lineTo(700,700);
context.lineWidth=5;
context.strokeStyle="red";
context.stroke();
//context.fill();
context.closePath();
API:
|函数|性质|意义|
| :---: | : ---: | :---: |
|beginPath()| 方法| 开始一段路径 |
|moveTo() | 方法 | 路径起始点 |
|lineTo() | 方法 | 路径终点 |
|lineWidth |属性 | 路径宽度 |
|strokeStyle|属性 | 路径颜色 |
|stroke() |方法 | 渲染路径 |
|fill() |方法 | 填充封闭路径 |
|closePath()|方法 | 结束一段路径 |
- 绘制矩形
绘制矩形也可以分为填充和绘制边框两种形式，使用fillRect(x,y,width,height)函数绘制实心矩形，使用strokeRect(x,y,width,height)函数绘制空心矩形。clearRect(x,y,width,height)函数来清除矩形区域。
/*--------- draw rect-------------------*/
context.beginPath();
context.fillStyle='yellow';
context.fillRect(10,10,10,10);
context.strokeStyle="black";
context.strokeRect(30,30,30,30);
context.closePath();
渐变的色条其实也是一个矩形块，可以使用createLinearGradient(x1,y1,x2,y2)函数来设置渐变色带的渐变方向，x1,y1代表起点,x2,y2代表终点。可以使用addColorStop(0,'颜色值'),addColorStop(1,'颜色值')来设置起点颜色和终点颜色。然后用设定的样式填充一个矩形。
/*-------- draw linearGradient ---------*/
var linear=context.createLinearGradient(0,0,50,300);
linear.addColorStop(0,'red');
linear.addColorStop(1,'green');
context.fillStyle=linear;
context.fillRect(10,10,200,200);
同样的绘制阴影也可以看作是在图形后面绘制一个其它矩形色块，代码如下。
/* ------ draw shandow -----------------*/
context.beginPath();
context.shadowOffsetX = 20; // 设置水平位移
context.shadowOffsetY = -20; // 设置垂直位移
context.shadowBlur = 6; // 设置模糊度
context.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色
context.fillStyle = "#CC0000";
context.fillRect(150,200,200,400);
context.closePath();
- 绘制圆形、弧线
弧线的绘制函数arc(x,y,r,startAngle, endAngle, anticlockwise)
x,y表示圆心的坐标，r表示半径，startAngle、endAngle代表开始弧度与结束弧度，anticloclwise表示弧线绘制是顺时针(false)还是逆时针(true)。
/*----------- draw circly -----------*/
context.beginPath();
context.lineWidth=5;
context.strokeStyle="blue";
context.arc(300,300,200,0,1.5*Math.PI,true);
context.stroke();
context.closePath();
如果要绘制原型将开始弧度、结束弧度分别设为0,2PI即可
* ----------- 实心圆 ---------------*/
context.beginPath();
context.fillStyle='red';
context.arc(50,50,50,0,2*Math.PI,true);
context.fill();
context.closePath();
/*----------- 空心圆 ---------------*/
context.beginPath();
context.lineWidth=5;
context.strokeStyle='red';
context.arc(200,200,50,0,2*Math.PI,true);
context.stroke();
context.closePath();
- 绘制文字
使用fillText(string,x,y)函数来绘制一段文字，string代表要绘制的问题，x、y代表起点坐标。strokeText(string,x,y)函数绘制空心文字。
/* ------- 绘制文字 --------------*/
context.beginPath();
//设置字体
context.font="Bold 20px Arial";
//设置对齐方式
context.textAlign="left";
context.lineWidth=2;
context.fillStyle="slive";
context.fillText("Hello ",300,300);
context.strokeText("world!",400,400);
context.closePath();
- 绘制图片
绘制图片之前必须首先加载图像。
var img=new Image();//创建对象
img.src="img/login2.jpg";//加载图片
img.onload=function(){
//加载图像
if(img.width!=canvas.width){
canvas.width=img.width;
}
if(img.height!=canvas.height){
canvas.height=img.height;
}
context.drawImage(img,0,0);
}
- 保存、加载上下文设置
context.save();
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 5;
context.shadowColor = "rgba(0,0,0,0.5)";
context.fillStyle = "#CC0000";
context.fillRect(10,10,150,100);
context.restore();
context
context.fillStyle = "#000000";
context.fillRect(180,10,150,100);
上面代码先用save方法，保存了当前设置，然后绘制了一个有阴影的矩形。接着，使用restore方法，恢复了保存前的设置，绘制了一个没有阴影的矩形。
四、像素处理
Paste_Image.png
网友评论