一句话描述:canvas是HTML5加入的用来绘制2D图像与文字的元素。
基础
简单步骤:
- var c = document.getElementById("mycanvas");获取dom
- var ct = c.getContext("2d");取得2D上下文
- ct.fillStyle = "red";确定绘图方式(填充/描边)
- ct.fillRect(0,0,50,50);确定绘图位置和大小,前两个参数表示起始点的xy坐标,后两个参数表示宽和高
绘图方式:
2D上下文提供两种基本的操作。
1.填充。fillStyle来确定,fillRect来确定位置和大小。
2.描边。strokeStyle来确定,strokeRect来确定位置和大小。
实例1:画一个正方形
//带边框
//HTML中
<canvas id="mycanvas" width="200" height="200"></canvas>
//js中
var c = document.getElementById("mycanvas");
var ct = c.getContext("2d");
ct.fillStyle = "aqua";
ct.fillRect(0,0,50,50);
ct.strokeStyle = "red";
ct.strokeRect(0,0,50,50);
好,最基本的操作学会了,继续往下走。
初级:
clearRect():
可以用来清除画布的内容。
实例2:画两个正方形,中间部分为空
var c = document.getElementById("mycanvas"); var ct = c.getContext("2d"); ct.fillStyle = "aqua"; ct.fillRect(0, 0, 50, 50); ct.fillStyle = "red"; ct.fillRect(30, 30, 50, 50); ct.clearRect(30, 30, 20, 20);
注意,clearRect的其实位置是从左上角开始的。
绘制时钟
实例3:画两个圆形作为时钟的轮廓,里面时针分针显示为九点。
需要用到的方法:
beginPath():表示要开始绘制路径(注意,只有矩阵能被简单的绘制,其他的图形都要用到额外的方法)
arc(x,y,radius,startAngle.endAngle.counterclockwise):以(x,y)为原型绘制一条弧线,半径为radius,后面两个参数表示起始角度和结束角度,最后一个值表示起始和结束是否按逆时针方向计算,值为true为顺时针.注意,圆形要考虑原本的画布的大小,超出的部分会被隐藏.
lineTo(x,y):从上一点开始绘制一条直线,到(x,y)为止
moveTo(x,y):将游标移到(x,y),不画线.
var c = document.getElementById("mycanvas"); var ct = c.getContext("2d"); ct.beginPath(); //画外圆 ct.arc(100,100,90,0,2*Math.PI,false); //画内圆 ct.moveTo(180,100);//画图会从0弧度开始画,也就是最右边,所以需要将起始点移到这里 ct.arc(100,100,80,0,2*Math.PI,false); //画分针 ct.moveTo(100,100); ct.lineTo(100,30); //画时针 ct.moveTo(100,100); ct.lineTo(50,100); ct.stroke();
实例4:绘制带数字的时钟
待续