JavaScript实现用Canvas绘制图形的基础教程

时间：2021-09-13 来源：互联网编辑：宝哥软件园浏览：次

由于这两年HTML5如火如荼，我研究了一段时间。最近有了一个使用HTML相关功能的想法，也要好好学习。

好好看看Canvas的功能，感觉HTML5在客户端交互方面的功能越来越多。今天看了Canvas的画图，这里有一些例子写下来，以备将来使用。

1.用画布画一条直线：

！doctype html html head meta charset=' UTF-8 '/head style type=' text/CSS ' canvas { border : dash 2px # CCC }/style script type=' text/JavaScript ' function $ $(id){ return document . getelementbyid(id)；}函数PageLoad(){ var can=$ $(' can ')；var cans=can . GetContext(' 2d ')；cans.moveTo(20，30)；//第一个起点是cans.lineTo(120，90)；//第二点cans.lineTo(220，60)；//第三点(从第二点开始)cans . line width=3；cans.strokeStyle=' redcans . stroke()；}/脚本正文on load=' page load()；'canvas id=' can ' width=' 400 px ' height=' 300 px ' 4/canvas/body/html这里使用的两个API方法，moveTo和lineTo分别是线段的起点和终点的坐标，变量分别是(x坐标、y坐标)，strokeStyle和stroke分别是绘图样式和路径。

2.绘制渐变线

渐变线意味着颜色具有渐变效果。当然，渐变样式可以跟随路径的方向，也可以不跟随：

！doctype html html head meta charset=' UTF-8 '/head style type=' text/CSS ' canvas { border : dash 2px # CCC }/style script type=' text/JavaScript ' function $ $(id){ return document . getelementbyid(id)；}函数PageLoad(){ var can=$ $(' can ')；var cans=can . GetContext(' 2d ')；cans.moveTo(0，0)；cans.lineTo(400，300)；var gnt 1=cans . createlinegradient(0，0，400，300)；//线性渐变gnt1.addColorStop的起始和结束坐标(0，‘红色’)；//创建渐变的起始颜色，其中0表示偏移量，个人理解为直线上的相对位置，最大值为1。任何渐变颜色gnt1.addColorStop(1，'黄色')都可以写入渐变；cans . line width=3；cans.strokeStyle=gnt1cans . stroke()；}/脚本正文on load=' page load()；'canvas id=' can ' width=' 400 px ' height=' 300 px ' 4/canvas/body/html 3，绘制一个矩形或正方形：

这种矩形框如果用HTML4只能用背景码生成，但是现在HTML5提供的Canvas功能很容易画出来，所以HTML5的优越性还是挺高的。

！doctype html html head meta charset=' UTF-8 '/head style type=' text/CSS ' canvas { border : dash 2px # CCC }/style script type=' text/JavaScript ' function $ $(id){ return document . getelementbyid(id)；}函数PageLoad(){ var can=$ $(' can ')；var cans=can . GetContext(' 2d ')；cans.fillStyle='黄色'；cans.fillRect(30，30，340，240)；}/脚本正文on load=' page load()；'canvas ID=' can ' width=' 400 px ' height=' 300 px ' 4/canvas/body/html此处使用的是一个方法——fillRect()。字面上，我们可以知道这是填充一个矩形。这里的参数值得解释fillRect(X，Y，Width，Height)，不同于数学中的坐标。

这里的x和y从Canvas的左上角开始，记住！

4.画一个简单的矩形框

在前面的例子中，提到了应该绘制一个矩形块并用颜色填充。这个例子只是画一个没有填充效果的矩形。

5、绘制一个线性渐变的矩形

渐变是填充的一种相当不错的效果，结合实例2和实例3,我们可以创建一个渐变的矩形

！doctype html html head meta charset=' UTF-8 '/head style type=' text/CSS ' canvas { border : dash 2px # CCC }/style script type=' text/JavaScript ' function $ $(id){ return document。getelementbyid(id)；}函数page LoAd(){ var can=$ $(' can ')；var cans=can。GetContext(' 2d ')；var gnt 1=罐。createlinegradient(10，0，390，0)；gnt1.addColorStop(0，红色');gnt1.addColorStop(0.5 ')绿色');gnt1.addColorStop(1，)蓝色');cans . fillstyle=gnt 1 cans . fill rect(10，10，380，280)；}/脚本正文on load=' page load()；'画布id=' can '宽度=' 400 px '高度=' 300 px ' 4/画布/正文/html不解释了，记住填充矩形(X，Y，宽度，高度)就行了。

6、填充一个圆形

圆形的用途很广，当然也包含了椭圆。

！doctype html html head meta charset=' UTF-8 '/head style type=' text/CSS ' canvas { border : dash 2px # CCC }/style script type=' text/JavaScript ' function $ $(id){ return document。getelementbyid(id)；}函数page LoAd(){ var can=$ $(' can ')；var cans=can。GetContext(' 2d ')；罐头。begin path()；可以。arc(200，150，100，0，数学* 2，真);罐头。close path()；cans.fillStyle='绿色；//本来这里最初使用的是红色，截图一看，傻眼了，怕上街被爱国者打啊，其实你懂的~ ~可以。fill()；}/脚本正文on load=' page load()；'画布id=' can '宽度=' 400 px '高度=' 300 px ' 4/画布/正文/html这里的弧方法的用法是弧线(X，Y，半径，起始角度，角度，逆时针方向),意思是（圆心X坐标，圆心Y坐标，半径，开始角度（弧度),结束角度弧度，是否按照顺时针画);

弧中各参数比较：

罐头。arc(200，150，100，0，数学，真);

可以。arc(200，150，100，0，数学/2，真);[/code]

可以。arc(200，150，100，0，数学/2，真);

d、can。arc(200，150，100，0，数学/2，假);

7、圆形区块

！doctype html html head meta charset=' UTF-8 '/head style type=' text/CSS ' canvas { border : dash 2px # CCC }/style script type=' text/JavaScript ' function $ $(id){ return document。getelementbyid(id)；}函数page LoAd(){ var can=$ $(' can ')；var cans=can。GetContext(' 2d ')；罐头。begin path()；可以。arc(200，150，100，0，数学* 2，假);罐头。close path()；罐头。线宽=5；cans.strokeStyle=' redcans。笔画()；}/脚本正文on load=' page load()；画布id=' can '宽度=' 400 px '高度=' 300 px ' 4/画布/正文/html这里不解释了，和上边的例子相同，线宽是控制线条的宽度的。

8、圆形渐变