查看: 1868|回复: 0

[DIV/CSS] canvas绘制基础

发表于 2017-9-24 08:00:05
句号论坛

初始接口

  1. <body>
  2. <canvas id=“canvas”></canvas>
  3. <script>
  4. var canvas = document.getElementById(“canvas”);
  5. var context = canvas.getContext(“2d”);
  6. //使用content进行绘制
  7. </script>
  8. </body>
复制代码

直线绘制

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <canvas id="canvas" style="border: 1px solid #ddd; margin: 0 auto"></canvas>
  9. <script>
  10. window.onload = function () {
  11. var canvas = document.getElementById("canvas");
  12. canvas.width = 1024;
  13. canvas.height = 768;
  14. //绘制的接口
  15. var context = canvas.getContext("2d");
  16. //Draw a line
  17. //意图绘制,状态绘制
  18. //路径定义的首尾
  19. context.beginPath();
  20. context.moveTo(100, 100);//笔尖
  21. context.lineTo(700, 700);//笔尾
  22. context.lineTo(100, 700);
  23. context.lineTo(100, 100);
  24. context.closePath();
  25. // context.fillStyle = "rgb(2,100,30)";
  26. // //填充颜色
  27. // context.fill();
  28. //线条的宽度
  29. context.lineWidth = 5;
  30. //线条的样式
  31. context.strokeStyle = "#058";
  32. //具体绘制
  33. //笔画
  34. context.stroke();
  35. context.beginPath();
  36. context.moveTo(200, 100);
  37. context.lineTo(700, 600);
  38. context.closePath();
  39. context.strokeStyle = "black";
  40. context.stroke();
  41. //canvas是基于状态绘制的
  42. }
  43. </script>
  44. </body>
  45. </html>
复制代码

方法

context.beginPath();

context.moveTo();

context.lineTo();

context.closePath();

context.fill();

context.stroke();

属性

context.fillStyle;

context.strokeStyle

context.lineWidth



太阳http代理AD
回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条