一波HTML5 Canvas基础绘图实例代码集合
更新时间:2023-04-03 05:48:03 阅读： 评论：0
基本绘制二十的英文怎么写
xml/html code
复制内容到剪贴板
varcanvas=document.getelementbyid(‘canvas’); if(canvas.getcontext){ varcontext=canvas.getcontext(‘2d’); //线宽 context.linewidth=4; //画笔颜色 context.strokestyle=‘red’; //填充色 context.fillstyle=“red”; //线帽类型 context.linecap=‘butt’;//round,square //开始路径 context.beginpath(); //起点 context.moveto(10,10); //终点 context.lineto(150,50); //绘制 context.stroke(); ｝
矩形
xml/html code
复制内容到剪贴板
varcanvas=d三皇五帝都有谁ocument.getelementbyid(‘canvas’); if(canvas.getcontext){ context.beginpath(); context.strokerect(10,10,70,40); //矩形的另一种方式 context.rect(10,10.70,40); context.stroke(); //实心矩形 context.beginpath(); context.fillrect(10,10,70,40); //另一种方式实心矩形 context.beginpath(); context.rect(10,10,70,40); context.fill(); ｝
圆形
xml/html code
复制内容到剪贴板
varcanvas=document.getelementbyid(‘canvas’); if(canvas.getcontext){ context.beginpath(); //圆中心坐标x,圆中心坐标y,圆弧半径，起始角度，终止角度，是否逆时针 //第4个参数和第五个参数是要传入的弧度，如果画30角度，需要将其转化为弧度30*math.pi/180 context.arc(100,100,70,0,130*math.pi/180,true); context.stroke(); context.fill(); ｝
圆角
xml/html code
复制内容到剪贴板
varcanvas=document.getelementbyid(‘canvas’); if(canvas.getcontext){ context.beginpath(); 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); context.stroke(); //擦除canvas画板 context.beginpat晶的结构h(); context.fillrect(10,10,200,100); //擦除区域 context.clearrect(30,30,50,50); ｝二次贝塞尔曲线
xml/html code
复制内容到剪贴板
varcanvas=document.getelementbyid(‘canvas’); if(canvas.getcontext){ context.beginpath(); context.moveto(100,100); context.quadraticcurveto(20未来最有前途的职业,50,200,20); context.stroke(); ｝
三次贝塞尔曲线
xml/html code复制内容到剪贴板
varcanvas=document.getelementbyid(‘canvas’); if(canvas.getcontext){ context.moveto(68,130); varcx1=20; varcy1=10; varcx2=268; varcy2=10; varendx=268; varendy=170; context.beziercurveto(cx1,cy1,cx2,cy2,endx,endy); context.stroke(); //利用clip指定绘图区域，指定绘图区域之后，只能在绘图区域中进行绘图擦欧总 //绘制圆形 context.arc(100,100,40,0,360*math.pi/180,true); //限制区域 context.clip(); //开始尝试绘制其他 context.beginpath(); context.fillstyle=‘lightblue’; //结果矩形并没有显示出来 context.fillrect(0,0,300,150); }画板进阶使用
xml/html code
复制内容到剪贴板
varcanvas=document.getelementbyid(‘canvas’); if(canvas.getcontext){ varcontext=canvas.getcontext(‘2d’); /* *drawimage(image,dx,dy) *drawimage(image,dx,dy,dw,dh) *drawimage(image,sx,sy,sw,sh,dx,dy,dw,dh); *image绘图对象 *dxdycanvas的坐标 *dw，dh表示image在canvas中即将绘图的位置 *sw，sh表示image所要绘图的区域 *sx,sy所要绘图的开始位置 */ varimage=document.getelementbyid(‘img’); context.drawimage(image,0,0); varimg=newimage(); img.src=‘images/1.jpg’; img.onload=function(){ //drawimage //从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=context.getimagedata(50,50,100,100); //将数据画到画板指定位置坐标 context.putimagedata(imgdata,10,260); //将所去的像素数据一部分，画到画板上 context.putimagedata(imgdata,200,260,50,50,100,100); //createimagedata创建像素 varimgdata=context.喜欢上你getimagedata(50,50,200,200); //创建指定大小的空对象 varimgdata01=context.createimagedata(imgdata); for(i=0;i<imgdata01.width*imgdata01.height*4;i+=4){ //红色像素 imgdata01.data[i+0]=255; imgdata01.data[i+1]=0; imgdata01.data[i+2]=0; imgdata01.data[i+3]=255; } context.putimagedata(imgdata01,10,260); } }
本文word下载地址：一波HTML5 Canvas基础绘图实例代码集合.doc
本文 PDF 下载地址：一波HTML5 Canvas基础绘图实例代码集合.pdf
