html5 canvas基础教程,canvas绘制div
基本绘制
XML/HTML代码复制内容到剪贴板var canvas=文档。getelementbyid(“canvas”)；如果(画布。获取上下文){ var context=canvas。获取上下文(“2d”)；//线宽语境。线宽=4；//画笔颜色context.strokeStyle= red//填充色context.fillStyle= red//线帽类型context.lineCap= butt//圆形、方形//开始路径语境。begin path()；//起点context.moveTo(10，10)；//终点context.lineTo(150，50)；//绘制语境。笔画()；}矩形
XML/HTML代码复制内容到剪贴板var canvas=文档。getelementbyid(“canvas”)；如果(画布。获取上下文){ context。begin path()；context.strokeRect(10，10，70，40)；//矩形的另一种方式context.rect(10，10.70，40)；语境。笔画()；//实心矩形语境。begin path()；context.fillRect(10，10，70，40)；//另一种方式实心矩形语境。begin path()；context.rect(10，10，70，40)；语境。fill()；}圆形
XML/HTML代码复制内容到剪贴板var canvas=文档。getelementbyid(“canvas”)；如果(画布。获取上下文){ context。begin path()；//圆中心坐标x，圆中心坐标y，圆弧半径，起始角度，终止角度，是否逆时针//第四个参数和第五个参数是要传入的弧度，如果画30角度，需要将其转化为弧度30 *数学/180 context . arc(100，100，70，0，130 *数学/180，真);语境。笔画()；语境。fill()；}圆角
XML/HTML代码复制内容到剪贴板var canvas=文档。getelementbyid(“canvas”)；如果(画布。获取上下文){ context。begin path()；context.moveTo(20，20)；context.lineTo(70，20)；//为一条路径画弧度p1.xp1.yp2.x，p2.y弧半径，context.arcTo(120，30，120，70，50)；context.lineTo(120，120)；语境。笔画()；//擦除帆布画板语境。begin path()；context.fillRect(10，10，200，100)；//擦除区域context.clearRect(30，30，50，50)；}二次贝塞尔曲线
XML/HTML代码复制内容到剪贴板var canvas=文档。getelementbyid(“canvas”)；如果(画布。获取上下文){ context。begin path()；context.moveTo(100，100)；context.quadraticCurveTo(20，50，200，20)；语境。笔画()；}
三次贝塞尔曲线
XML/HTML Code复制内容到剪贴板var canvas=文档。getelementbyid(“canvas”)；如果(画布。获取上下文){ context。移到(68，130)；varcx 1=20 varcy 1=10 varc x2=268 varcy 2=10 varendx=268 varendy=170 context . beziercurveto(cX1，cY1，cX2，cY2，endX，endY)；语境。笔画()；//利用夹子指定绘图区域，指定绘图区域之后，只能在绘图区域中进行绘图擦欧总//绘制圆形context.arc(100，100，40，0，360 *数学/180，真);//限制区域context.clip().//开始尝试绘制其他语境。begin path()；语境。填充样式=浅蓝色；//结果矩形并没有显示出来context.fillRect(0，0，300，150)；}画板进阶使用
XML/HTML代码复制内容到剪贴板var canvas=文档。getelementbyid(“canvas”)；如果(画布。获取上下文){ var context=canvas。获取上下文(“2d”)；/* *drawImage(image，dx，dy) *drawImage(image，dx，dy，dw，dh) *drawImage(image，sx，sy，sw，sh，dx，dy，dw，DH)；*图像绘图对象*dxdycanvas的坐标*dw，dh表示图像在帆布中即将绘图的位置*软件，软件表示图像所要绘图的区域*sx，sy所要绘图的开始位置*/varimage=document。getelementbyid( img )；context.drawImage(image，0，0)；varimg=new image()；img。src= images/1。jpg ；img。onload=function(){//绘制图像//从0,0坐标开始绘制//context.drawImage(img，0，0)；//从0,0开始，绘制整张图到100,100长宽//context.drawImage(img，0，0，100，100)；//截图，50,50到100,100从260,130开始绘制，放到100,100长宽区域中//context.drawImage(img，50，50，100，100，260，130，100，100)；//利用getImageData和putImageData绘制图片context.drawImage(img，10，10)；//从画板上获取像素数据//开始位置，结束位置varimgData=上下文。getimagedata(50，50，100，100)；//将数据画到画板指定位置坐标context.putImageData(imgData，10，260)；//将所去的像素数据一部分，画到画板上context.putImageData(imgData，200，260，50，50，100，100)；//createImageData创建像素varimgData=上下文。getimagedata(50，50，200，200)；//创建指定大小的空对象varimgdata 01=上下文。创建imagedata(img数据)；for(I=0；iimgdata 01。宽度* img数据01。高度* 4；i=4){ //红色像素img数据01。data[I 0]=255；img数据01。data[I 1]=0；img数据01。data[I ^ 2]=0；img数据01。数据[i3]=255；}上下文。putimagedata(img数据01，10，260)；} }
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。