作者：徐韵茜YUNXI | 来源：互联网 | 2023-01-22 19:04
canvas：<canvas>标签只是图形容器，你必须使用脚本来绘制图形，有一个机遇javascript的绘图API。要从同一图形的一个<canvas>标记中移除元素，往往需要
canvas：
大多数canvas绘图API都是定义在通过画布的getContext()方法获取的一个"绘图环境"对象上。
View Code
每个canvas都有一个对应的context对象，canvas API定义在这个context对象上面。使用getContext方法获取该对象。参数2d表示绘制2d平面图形。
1.context.beginPath方法表示开始绘制路径，MoveTo(x,y)设置线段的起点，lineTo(x,y)设置线段的终点。strokeStyle属性设置线段颜色，stroke方法用来给线段着色。
//绘制线段，有closePath（）整个变成一个封闭的图形。
context.beginPath();context.moveTo(10,200);
context.lineTo(100,250);
context.lineTo(100,500);
context.closePath();
context.strokeStyle="#ffcc00";
context.stroke();
2.fillRect(x,y, width,height)方法用来绘制矩形，四个参数为矩形左上角的顶点及矩形宽高。fillStyle属性用来填充矩形颜色。
strokeRect方法与fillRect方法类似，用来绘制空心矩形。
clearRect方法用来清除某个矩形区域内容。你可以在已画好的矩形部分截取掉某部分。
//绘制矩形
context.fillcolor: #800000;">"eeeeff";context.fillRect(0,0,400,300);
//绘制空心矩形
context.strokeRect(0,0,400,300);
//清除矩阵区域
context.clearRect(0,0,200,100);
3.绘制圆形和扇形。
arc(x,y,radius,startAngle,endAngle,anticlockwise):radius表示半径，startAngle与endAngle则是扇形的起始角度和终止角度(用弧度表示)，anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。
//绘制实心的圆。
context.beginPath();context.fillStyle="#ff0000";
context.arc(100,100,30,5,Math.PI*1,true);
context.fill();
//绘制空心圆
context.beginPath();
context.arc(60,60,10,0,Math.PI*1,true);
context.stroke;
context.stroke();
4. createLinearGradient 设置渐变色
createLinearGradient(x1,y1,x2,y2):其中x1和y1是起点坐标，x2和y2是终点坐标。通过不同的坐标值，可以生成从上至下,从左到右的渐变等等。
//设置一矩形水平渐变色
var grd==context.createLinearGradient(0,50,100,50);
grd.addColorStop(0,"#ff0");
grd.addColorStop(1,"#f00");
context.fillStyle=grd;
context.fillRect(10,10,200,300);
5.设置阴影
ctx.shadowOffsetX设置水平位移，ctx.shadowOffsetY设置垂直位移，ctx.shadowBlur设置模糊度，ctx.shadowColor设置阴影颜色。
//设置一矩形阴影。
context.shadowOffsetX=10;context.shadowOffsetY=10;
context.shadowBlur=5;
context.shadowColor="rgba(0,0,0,0.5)";
context.fillStyle="red";
context.fillRect(20,20,200,200);
6.绘制文本
fillText(string,x,y)用来绘制文本，它的三个参数分别为文本内容，起点的X,Y坐标，使用前需要先用font设置字体,大小,样式。
strokeText()方法用来添加空心文字。
//设置字体。
context.fOnt="Bold 10px Arial";context.textAligh="left";
context.fillStyle="red";
context.fillText("Hell0!",10,50);
//绘制空心字体
context.strokeText("Hello!",10,100);
7.载入图像：drawImage
canvas允许将图像文件插入画布，做法是读取图片后，使用drawImage方法在画布内进行重绘。由于图像的载入需要时间，drawImage方法需要在图片完全载入后才能调用。
drawImage方法接受三个参数，第一个参数是图像文件的DOM元素，即img标签，第二个第三个是图像左上角在canvas中的坐标。
//载入图像
var img=new Image();img.onload=function(){
if(img.width!=canvas.width)
img.width=canvas.width;
if(img.height!=canvas.height)
img.height=canvas.height;
context.clearRect(0,0,canvas.width,canvas.height);//将画布清空。
context.drawImage(img,0,0);
}
img.src="demo.jpg";
8.读取canvas内容，getImageData(), putImageData()
getImageData方法可以用来读取Canvas的内容，返回一个对象，包含了每个像素的信息。
返回的对象包含一个data属性，它的值是一个一维数组。该数组的值，依次是每个像素的红、绿、蓝、alpha通道值。该数组可读可写。
修改这个数组后，使用putImageData方法将数组内容重新绘制在Canvas上。
var imgData=context.getImageData(0,0,context.width,context.height);
var d=imgData.data;
for (var i =0; i4)
{
var r=d[i];
var g=d[i+1];
var b=d[i+2];
d[i]=d[i+1]=d[i+2]=(r+g+b)/3;
}
context.putImageData(imgData,0,0);
京公网安备 11010802041100号