canvas绘制基础 - 喵嘻嘻_H5之家 - 中国HTML5教程资源分享第一站

初始接口

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