一句话描述: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的其实位置是从左上角开始的。
绘制时钟
待续。。