一波HTML5 Canvas基础绘图实例代码集合

2020-03-24 18:59:01

字体：大中小

来源：转载

供稿：网友

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(); ｝
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(); ｝
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(); ｝
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); ｝
varcanvas=document.getElementById('canvas'); if(canvas.getContext){ context.beginPath(); context.moveTo(100,100); context.quadraticCurveTo(20,50,200,20); context.stroke(); ｝
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); }
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); } }html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：浅析移动设备HTML5页面布局

下一篇：HTML5如何实现元素拖拽