一波HTML5 Canvas基础绘图实例代码集合
2021-05-08 21:10:14 基本绘制
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=document.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/180context.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.beginPath();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);}} 声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。
网站建设 IT知识 IT知识教程 一波HTML5 Canvas基础绘图实例代码集合 
最新文章
热门文章
猜你喜欢
