JavaScript基础——用画布绘图

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

最近一直在学习Canvas的画法，最近有时间做了一个收尾工作，如下：

1.基本用法

要使用画布元素，必须首先设置其宽度和高度属性，并指定可绘制区域的大小。开始和结束标签中的内容是备份信息，如果浏览器不支持canvas元素，则会显示这些信息。例如：

Canvas id=' drawing ' width=' 200 ' height=' 200 '某事物的绘图/canvas使用toDataURL()方法，可以导出在canvas元素上绘制的图像。

var drawing=document . getelementbyid(' drawing ')；//确保浏览器支持canvas元素if(drawing.getContext){ //获取绘图上下文对象的引用，“2D”就是获取2d上下文对象varcontext=drawing。get context(' 2d ')；//获取图像的数据uri varimguri=drawing . todaytaul(' image/png ')；警报(IMguri)；//显示图像var image=document . create element(' img ')；image.src=imgURIdocument.body.appendChild(图像)；} 2、2D语境

(1)、填充和描边

填充：用指定的样式填充图形；笔画：就是只在图形的边缘画线。fillStyle和strokeStyle的值可以是字符串、渐变对象或图案对象。

var drawing=document . getelementbyid(' drawing ')；//确保浏览器支持canvas元素if(drawing.getContext){ //获取绘图上下文对象的引用，“2D”就是获取2d上下文对象varcontext=drawing。get context(' 2d ')；/span span style=' font-size :14 px；'//由于此程序中没有图像，填充和跟踪时不会显示context.strokeStyle=' # 0000ffcontext.fillStyle=' red} (2)画一个矩形

矩形是唯一可以在2D上下文中直接绘制的形状。与矩形相关的方法包括fillRec()、strokeRect()和clearRect()。这三种方法可以接受四个参数：x坐标、y坐标、宽度和高度。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title canvas drawing/title/head body canvas id=' drawing ' width=' 200 ' height=' 200 ' style=' border 3360 # 0f 0solid 1px '某事物的绘图/canvas script var drawing=document . getelementbyid(' drawing ')；//确保浏览器支持canvas元素if(drawing.getContext){ //获取绘图上下文对象的引用，“2D”就是获取2d上下文对象varcontext=drawing。get context(' 2d ')；//绘制一个红色的矩形context.fillStyle=' redcontext.fillRect(10，10，50，50)；//绘制一个半透明的蓝色矩形上下文。fillstyle=' rgba (0，0，255，0.5)'；context.fillRect(30，30，50，50)；//绘制红色描边矩形context.strokeStyle=' redcontext.strokeRect(10，90，50，50)；//绘制一个半透明的蓝色笔画矩形context.stroke style=' rgba (0，0，255，0.5)'；context.strokeRect(30，120，50，50)；//清除两个矩形重叠的小矩形context.clearRect(30，30，30，30)；}/脚本/正文/html

以下是使用toDataURL()导出画布元素上绘制的图像的过程：

(3)、绘制路径

要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlecanvas绘图/title/head body画布id=' Drawing ' width=' 420 ' height=' 420 ' style=' border : # 0f 0 solid 1px ' a Drawing of某物/画布脚本var Drawing=文档。getelementbyid(' Drawing ')；//确定浏览器支持帆布元素if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象var上下文=绘图。get context(' 2d ')；//开始路径语境。begin path()；/*绘制弧线，使用圆弧(x，y，半径，起始角度，结束角度，逆时针方向)方法以(x，y)为圆心绘制一条弧线，弧线半径为半径，起始和结束角度（用弧度表示)分别为开始角度和单身。最后一个参数表示是否按逆时针方向计算，值为错误的表示顺时针方向计算*/context.arc(130，130，90，0，2*Math .PI，假);/*arcTo(x1，y1，x2，y2，半径):从上一点开始绘制一条弧线，到(x2，y2)为止，并且以给定的半径半径穿过(x1，y1) */context.arcTo(310，220，400，130，80)/* beziercerveto(c1x，c1y，c2x，c2y，x，y):从上一点开始绘制一条曲线，到(x，y)为止，并且以(c1x，c1y)和(c2x，c2y)为控制的*/上下文。beziercerveto(320，210，400，250，310，300)；/*lineTo(x，y):从上一点开始绘制一条直线，到(x，y)为止*/context.lineTo(0，300)；context.moveTo(130，220)；context.lineTo(100，300)；/*quadraticCurveTo(cx，cy，x，y):从上一点开始绘制一条二次曲线，到(x，y)为止，并且以(cx，cy)作为控制点*/context.quadraticCurveTo(40，380，130，400)；context.lineTo(450，400)；/*rect(x，y，宽度，高度):从点(x，y)开始绘制一个矩形路径*/context.rect(80，80，100，100)上下文。strokestyle=' rgba(0，0，255，0.5)'；//最后必须调用冲程()方法，这样才能把图像绘制到画布上语境。笔画()；}/脚本/正文/html

(4)、绘制文本

绘制文本主要有两个方法：fillText()和strokeText()。这两个方法接收四个参数：要绘制的文本字符串、x坐标，y坐标和可选的最大像素宽度。这两个方法有三个属性：字体、文本对齐和文本基线。

(5)、变换

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlecanvas绘图/title/head body画布id=' Drawing ' width=' 200 ' height=' 200 ' style=' border : # 0f 0 solid 1px ' a Drawing of某物/画布脚本var Drawing=文档。getelementbyid(' Drawing ')；//确定浏览器支持帆布元素if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象var上下文=绘图。get context(' 2d ')；//开始路径语境。begin path()；//缩放图像/* scaleX(Scalex，scaleY):缩放图像，在x方向乘以scaleX，在y方向乘以scaleY。scaleX和scaleY的默认值都是1.0 */context.scale(0.8，0.8)；//绘制外圆context.arc(100，100，99，0，2 *数学.PI，假);//绘制内圆context.moveTo(194，100)；//将绘图游标移动到(x，y)，不画线context.arc(100，100，94，0，2 *数学.PI，假);//变换原点/*平移(x，y):将坐标原点移动到(x，y)。执行这个变换后，坐标(0,0)会变成之前由(x，y)表示的点*/context.translate(100，100)；//添加文字“12”语境。font=' bold 14px Arialcontext . textalign=' center context . text baseline=' middle//文本的基线context.fillText('12 '，0，-85)；//旋转表针/*旋转（角度): 围绕原点旋转图像角弧度*/上下文。旋转(1)；//绘制分针context.moveTo(0，0)；context.lineTo(0，-80)；//绘制时针context.moveTo(0，0)；context.lineTo(-65，0)；context.strokeStyle='rgba(0，0，255，0.5)'；//最后必须调用冲程()方法，这样才能把图像绘制到画布上语境。笔画()；}/脚本/正文/html

(6)、绘制图像

var drawing=文档。getelementbyid(' drawing ')；//确定浏览器支持帆布元素if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象var上下文=绘图。get context(' 2d ')；var image=文档。getelementbyid(' image ')；context.drawImage(image，10，10，20，20)；//起点为(10,10),图像大小会变成20x20像素；} (7)、阴影

(8)、渐变

渐变由CanvasGradient实例表示，很容易通过2D上下文来创建和修改。要创建一个新的先行渐变，可以调用createLinearGradient()方法。这个方法接收四个参数：起点的x坐标，起点的y坐标，终点的x坐标，终点的y坐标。创建渐变对象后，下一步就是使用addColorStop()方法来指定色标，这个方法接收两个参数：色标位置和钢性铸铁颜色值。色标位置是一个0(开始的颜色)到1(结束的颜色)之间的数据。

为了确保渐变与形状对齐，有时候可以考虑使用函数来确保坐标合适，例如：

函数createrectlinegradient(context，x，y，宽度，高度){返回上下文。createlinegradient(x，y，x宽度，y高度);} !DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlecanvas绘图/title/head body画布id=' Drawing ' width=' 200 ' height=' 200 ' style=' border : # 0f 0 solid 1px ' a Drawing of某物/画布脚本var Drawing=文档。getelementbyid(' Drawing ')；//确定浏览器支持帆布元素if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象var上下文=绘图。get context(' 2d ')；//设置渐变var gradient=createrectlinegradient(上下文，30,30,50,50);gradient.addColorStop(0，‘white’)；gradient.addColorStop(1，‘black’)；//绘制红色矩形context . fillstyle=' redcontext . fill rect(10，10，50，50)；//绘制渐变矩形context.fillStyle=渐变；context.fillRect(30，30，50，50)；} //确保渐变与形状对齐函数createrectlinegradient(context，x，y，宽度，高度){返回上下文。createlinegradient(x，y，x宽度，y高度);}/脚本/正文/html

要创建径向渐变（或放射渐变),可以使用createRadialGradient()方法，这个方法接收6个参数，对应着两个圆的圆心和半径，

(9)、模式

模式其实就是重复的图像，可以用来填充或描边图形

var drawing=文档。getelementbyid(' drawing ')；//确定浏览器支持帆布元素if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象var上下文=绘图。get context(' 2d ')；var image=文档。图像[0]；pattern=context.createPattern(图像，' repeat ')；context . fillstyle=pattern context . fill rect(10，10，150，150)；} 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaScript基础——用画布绘图

新天龙八部

热门手游排行榜