canvas绘制基础 - 喵嘻嘻

      2020-08-01 23:49      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