矩形绘制
-
context.fillRect(x, y, width, height)
-
strockRect(x,y,width,height),绘制矩形边框
-
clearRect(x,y,width,height),清除知道哪个区一使其完全透明
-
context.fillRect(x, y, width, height)绘制矩形
-
ontext.save()保存当前状态到堆栈
-
context.restore()调用最后存储的堆栈恢复画布
-
beginPath()开始路径
-
closePath()结束路径
-
linejoin()两条交线产生的拐角,round连接处为圆型,bevel连接处为一个对角线斜角
-
context.fillText (“Canvas!”, 0, 0);文本添加
//最基础的直线路径
//最基础的直线路径
context.strokeStyle='blue';
context.lineWidth=10;
//context.lineCap='square端点为矩形,round端点为半圆
context.lineCap='square';
context.beginPath();
context.moveTo(20,100);
context.lineTo(200,100);
context.stroke();
context.closePath();
/高级线段绘制
//高级线段绘制
context.strokeStyle='gold';
context.lineWidth=15;
context.lineJoin='bevel';
context.lineCap='round';
context.beginPath();
context.moveTo(200,200);
context.lineTo(200,400);
context.lineTo(400,200);
context.stroke();
context.closePath();
空心正方形
context.fillStyle="#000000";
context.strokeStyle="#ff00ff";
context.lineWidth=2;//表示线条的宽度
context.fillRect(10,10,40,40);
context.strokeRect(0,0,60,60);
context.clearRect(20,20,20,20);