当前位置:Gxlcms > html代码 > html5:canvas

html5:canvas

时间:2021-07-01 10:21:17 帮助过:33人阅读

1.什么是canvas?

可以绘制图形的标签。一般用javascript来绘制。

2.创建一个画布

  1. <title></title>
  2. <canvas id="mycanvas" width="100" height="100"></canvas> //创建画布用canvas标签

3.在画布上绘图。

4.canvas-路径

  1. var can=document.getElementById("mycanvas");
  2. var draw=can.getContext("2d");
  3. // 开始一个路径
  4. draw.beginPath();
  5. // 设置线的粗细
  6. draw.lineWidth="5";
  7. //设置线的颜色
  8. draw.strokeStyle="green";
  9. // 线的起点
  10. draw.moveTo(0,75);
  11. //线的终点
  12. draw.lineTo(250,75);
  13. // 开始绘制路径
  14. draw.stroke();
  15. //开始另一个路径
  16. draw.beginPath();
  17. // 设置线的粗细
  18. draw.lineWidth="5";
  19. draw.strokeStyle="purple";
  20. draw.moveTo(25,05);
  21. draw.lineTo(35,25);
  22. draw.stroke();

效果:

1.png

人气教程排行