首先，我们将介绍用画布绘制直线所需的属性

MoveTo(x，y)可以设置直线起始位置的坐标

LineTo(x，y)可以设置直线结束位置的坐标

线宽可以设置线条的宽度

StrokeStyle可以设置线条的颜色

用画布画一条直线，详细说明步骤：

1.使用canvas标签在浏览器上定义一个canvas，并给它一个ID名。您可以根据自己的需要设置画布的大小和背景颜色。

2.用varc=document . getelementbyid(' my canvas ')获取canvas元素

3.通过varctx=c.getContext('2d ')创建上下文对象

4.设置直线的起点和终点，起点位置移动到(25，25)，终点位置直线到(175，175)

5.可以用ctx.lineWidth=5设置线条宽度，用ctx.strokeStyle='红色'设置线条颜色

6.最后用ctx.stroke()画一条直线，就完成了

具体代码如下：

！DOCTYPEhtml

超文本标记语言

头

metharset=' UTF-8 '

标题/头衔

/head

身体

canvasid=' MyCanvas ' width=' 200 px ' height=' 200 px ' style=' border :1 pxsolid # 00000；/canvas

/body

scripttype='text/javascript '

varc=document . GetElementbyID(' MyCanvas ')；

var CTX=c . GetContext(' 2d ')；

ctx.moveTo(25，25)；

ctx.lineTo(175，175)；

CTX . LineWidth=5；

ctx.strokeStyle=' red

CTX . stroke()；

/script

/html

本文转载自中文网站