canvas是html5涌现的新标签,重要用来绘图,瞥见网上能用来完成种种图形,所以觉得很好玩,就进修了一下。
canvas绘制图形有两种要领:
context.fill() //添补
context.stroke() //绘制边框
在绘制图形前要设置好图形款式,也有两种要领:
context.fillStyle() //添补的款式
context.strokeStyle() //边框款式
下面就最先绘制种种图形
绘制矩形
context.fillRect(x,y,width,height)
context.fillRect(x,y,width,height)
x : 矩形的出发点横坐标
y : 矩形的出发点纵坐标
width : 矩形的宽度
function draw(){
var canvas = document.getElementById('chen'),
context = canvas.getContext('2d');
canvas.width = 100;
canvas.height = 100;
context.fillStyle = 'red'; //发明要先设置添补色彩
context.fillRect(0, 0, 100 ,100);
context.strokeRect(0, 100, 100 ,100);
}
draw();
圆
context.arc(x,y,radius,starAngle,endAngle, anticlockwose)
radius : 半径