canvas绘制直线

时间 2019-12-12

标签 canvas 绘制直线繁體版

原文原文链接

HTML5 <canvas>元素用于图形的绘制，该元素只是图形容器，必须使用javascript脚本绘制图形
建立一个画布：
<canvas id="myCanvas" width="200" height="100">您的浏览器该升级了</canvas>
默认状况下，<canvas>元素没有边框和内容javascript

绘图开始首先要获取绘图对象
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d")
getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形等方法。java

canvas绘制直线canvas

moveTo(x,y)定义线条开始坐标浏览器

lineTo(x,y)定义线条结束坐标spa

也能够用beginPath()方法来开始一段新的路径，此时能够不用moveTo(x,y)直接用lineTo(x,y)对象

lineWidth属性定义线条的宽度blog

strokeStyle属性定义线条颜色ip

stroke()绘制线条get

注意：lineTo(x,y)能够定义结束坐标，用这个方法关闭路径会有瑕疵，通常咱们用closePath()方法自动关闭路径这样没有瑕疵容器

lineTo(x,y)关闭路径以下图所示：

closePath(x,y)关闭路径以下图所示