手机
当前位置:查字典教程网 >网页设计 >HTML5教程 >一波HTML5 Canvas基础绘图实例代码集合
一波HTML5 Canvas基础绘图实例代码集合
摘要:基本绘制XML/HTMLCode复制内容到剪贴板varcanvas=document.getElementById('canvas');if...

基本绘制

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/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.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); } }

【一波HTML5 Canvas基础绘图实例代码集合】相关文章:

HTML5 Canvas+JS控制电脑或手机上的摄像头实例

HTML5边玩边学(2)基础绘图实现方法

HTML5 canvas画图并保存成图片的jcanvas插件

一个不错的HTML5 Canvas多层点击事件监听实例

HTML5 Canvas绘制圆点虚线实例

使用HTML5拍照示例代码

HTML5 Canvas——用路径描画线条实例介绍

html5 canvas 画图教程案例分析

html5 Canvas绘制线条 closePath()实例代码

HTML5 Canvas的事件处理介绍

精品推荐
分类导航