canvas基本用法 canvas基本用法

一、创建canvas

Document - 锐客网

如图

文章图片
image.png 二、修改 Canvas 的画布

文章图片
image.png 三、获取绘制环境我们可以通过 var ctx = canvas_1.getContext("2d"); 来去获取到我们的绘制环境。

文章图片
image.png 四、绘制的坐标轴横轴向右是正，纵轴向下是正。

文章图片
image.png 五、绘制直线绘制直线满足的条件
线的起点
线的终点
线的颜色
线的宽度

文章图片
image.png 直线样式

// 直线填充 // 开始绘制 ctx.beginPath(); //设置绘制起点 ctx.moveTo(0, 0); //设置绘制下一个点 ctx.lineTo(300, 400); // //设置绘制下一个点 ctx.lineTo(400, 100); // //设置线的宽度 ctx.lineWidth = 10; // //结束绘制 ctx.closePath(); // // 设置填充样式 ctx.fillStyle = "green"; // //设置绘制的样式 ctx.strokeStyle = "red"; ctx.fill() ctx.stroke()