HTML5技术

canvas绘制基础 - 喵嘻嘻

字号+ 作者:H5之家 来源:H5之家 2017-09-14 12:02 我要评论( )

初始接口 document.getElementById(“canvas”); canvas.getContext(“2d”); 直线绘制 !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titleTitle/title/headbodycanvas/canvasscript window.onload = function () { var canvas = document.getElemen

初始接口

document.getElementById(“canvas”); canvas.getContext(“2d”);

直线绘制

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas></canvas> <script> window.onload = function () { var canvas = document.getElementById("canvas"); canvas.width = 1024; canvas.height = 768; context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100, 100);//笔尖 context.lineTo(700, 700);//笔尾 context.lineTo(100, 700); context.lineTo(100, 100); context.closePath(); // context.fillStyle = "rgb(2,100,30)"; // //填充颜色 //context.lineWidth = 5; //线条的样式 context.strokeStyle = "#058"; context.stroke(); context.beginPath(); context.moveTo(200, 100); context.lineTo(700, 600); context.closePath(); context.strokeStyle = "black"; context.stroke(); //canvas是基于状态绘制的 } </script> </body> </html>

方法

context.beginPath();

context.moveTo();

context.lineTo();

context.closePath();

context.fill();

context.stroke();

      

属性

context.fillStyle;

context.strokeStyle

context.lineWidth

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • canvas基础绘制-arc - 喵嘻嘻

    canvas基础绘制-arc - 喵嘻嘻

    2017-09-14 13:00

  • JavaScript: 使用 atan2 来绘制 箭头 和 曲线 - 救火队长

    JavaScript: 使用 atan2 来绘制 箭头 和 曲线 - 救火队长

    2017-09-14 08:04

  • bootstrap 基础(二) - 许大仙

    bootstrap 基础(二) - 许大仙

    2017-09-13 12:06

  • Js利用Canvas实现图片压缩 - similar

    Js利用Canvas实现图片压缩 - similar

    2017-09-12 12:00

网友点评
.