canvas学习总结（1）

最新推荐文章于 2024-09-05 22:33:44 发布

冷风**

最新推荐文章于 2024-09-05 22:33:44 发布

阅读量97

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/ypuzhiyuan/article/details/105815469

版权

矩形绘制

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);