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

时间：2021-05-08

基本绘制

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时钟示例

HTML5 创建canvas元素示例代码

JavaScript html5 canvas绘制时钟效果

用html5的canvas画布绘制贝塞尔曲线完整代码

HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题