js高级程序设计笔记10--canvas绘图

2019-11-02 18:26:36

字体：大中小

来源：转载

供稿：网友

要使用元素，必须先设置width和height属性，指定可以绘图的区域大小。

<canvas id=‘drawing" width="200" height="200">a drawing of something</canvas>

要在canvas上画图，要取得绘图上下文：getContext(上下文的名字)。传入“2d”则获得2D上下文。

var drawing = document.getElementById("drawing");//确认浏览器支持canvas元素if(drawing.getContext){ var context = drwaing.getContext("2d");}

使用toDataURL()方法可以导出元素上绘制的图像。接受一个参数：图像的MIME类型格式。取得画布中一幅PNG格式的图像。

var imgURI = drawing.toDataURL("image/png");var image = document.createElement("img");image.src = imgURI;document.body.appendChild(image);

2D上下文

2D上下文的坐标始于元素的左上角，原点坐标是(0,0)。

填充和描边

两个属性：fillStyle和strokeStyle。这两个属性的值可以是字符串，渐变对象或模式对象，他们的默认值都是“#000000”。如果是颜色可以使用CSS中颜色值的任何格式。

var context = drawing.getContext("2d");context.strokeStyle = "red";context.fillStyle = "#0000ff";

绘制矩形

fillRect():填充矩形，填充的颜色由fillStyle属性指定。 strokeRect():绘制的矩形用指定的颜色描边。颜色由strokeStyle属性指定.描边线条的宽度由lineWidth属性控制，可以是任意整数。lineCap属性可以控制线条末端的形状是平头，圆头，还是方头。(“butt”,”round”,”square”),lineJoin属性可以控制线条相交的方式是圆交，斜交，斜接(“round”,”bevel”,”miter”) clearRect():清楚画布上的矩形区域。

这三个方法都接受4个参数：矩形的x坐标，矩形的y坐标，矩形宽度和高度。单位都是像素。

var context = drawing.getContext("2d"); //绘制红色矩形 context.fillStyle = "#ff0000"; context.fillRect(10,10,50,50); //绘制半透明的蓝色矩形 context.fillStyle = "rgba(0,0,255,0.5)"; context.fillRect(30,30,50,50); context.clearRect(40,40,10,10); context.strokeStyle = "#ff0000"; context.strokeRect(20,20,50,50); context.strokeStyle = "rgba(0,0,255,0.5)"; context.strokeRect(40,40,50,50);

绘制路径

要绘制路径，首先调用beginPath()方法，然后再调用下列方法绘制路径：

arc(x,y,radius,startAngle,endAngle,counterclockwise):以（x,y)为圆心绘制一条弧线，半径为radius，起始和结束角度，是否按逆时针方向计算角度。 arcTo(x1,y1,x2,y2,radius):从上一点到（x2,y2)画一条弧线，并且以给定的半径radius穿过(x1,y1). bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点绘制一条曲线，到(x,y)为止，并且以(c1x,c1y),(c2x,c2y)为控制点。 lineTo(x,y):从上一点绘制一条直线。到(x,y)。 moveTo(x,y):将绘图游标移动到(x,y)，不划线。 quadraticCruveTo(cx,cy,x,y):从上一点绘制一条二次曲线，到（x,y)为止，以(cx,cy)为控制点。 rect(x,y,width,height):从点(x,y)绘制一个矩形。

创建路径后，可调用以下方法： 1. closePath():绘制一条连接到路径起点的线条。 2. fill()：填充 3. stroke()：描边 4. clip()：在路径上创建一个剪切区域。绘制一个时钟

context.beginPath(); //绘制外圆 context.arc(100,100,99,0,2*Math.PI,false); //内圆 context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //分针 context.moveTo(100,100); context.lineTo(100,15); //时针 context.moveTo(100,100); context.lineTo(35,100); context.stroke();

isPointInPath(x,y):确定（x,y)在不在路径上。

绘制文本

fillText(): strokeText(): 这两个方法都接受4个参数：要绘制的文本字符串，x坐标，y坐标和可选的最大像素高度。而且这两个方法都以3个属性为基础： font:表示文本样式，大小及字体。 textAlign:文本对齐方式。可取的值：start,end,left,right,center.建议使用start和end。因为这两个能同时适合从左到右和从右到左显示的语言。 textBaseline:文本的基线。可取的值：top,hanging,middle,alphabetic,ideographic,bottom. 这几个属性都有默认值。

context.font = "bold 14px Arial";context.textAlign = "center";context.textBaseline = "middle";context.fillText("12",100,20);

变换

rotate(angle):围绕原点旋转图像angle弧度。 scale(scaleX,scaleY):缩放图像，在x方向上乘以scaleX,在Y方向上乘以scaleY. translate(x,y):将坐标原点移动到(x,y). transform(m1_1,m1_2,m2_1,m2_2,dx,dy):直接修改变换矩阵，方式是乘以如下矩阵： m1_1 m1_2 dx m2_1 m2_2 dy 0 0 1 setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy):将变换矩阵重置为默认状态，然后再调用transform（）.

还有两个方法需要注意（可以多次调用）： save():对绘图上下文的设置进行保存。以便将来会用到。(保存在一个栈结构中) restore()：一级级恢复上下文的设置。即context回到save()之前的状态。

绘制图像

drawImage():把一幅图像绘制到画布上。三种不同的调用方式：传入一个元素，绘制图像起点的x,y坐标。

var image = document.images[0];context.drawImage(image,10,10);

还可以再传两个参数：目标宽度，目标高度。以此来缩放图像。

context.drawImage(image,10,10,20,30);

第三种调用方式传入9个参数：要绘制的图像，源图像的x坐标，源图像的y坐标,源图像的宽度，源图像的高度，目标图像的x坐标，目标图像的y坐标，目标图像的宽度，目标图像的高度。

注:除了给drawImage（）方法传入元素外，还可以传入另一个元素作为其第一个参数。这样就可以把另一个画布内容绘制到当前画布上。

阴影

2D上下文会根据以下几个属性自动为形状或路径绘制出阴影： shadowColor:用Css颜色格式表示的阴影颜色，默认为黑色。 shadowOffsetX:形状或路径x轴的阴影偏移量，默认为0. shadowOffsetY:形状或路径ya轴的阴影偏移量，默认为0. shadowBlur:模糊的像素数，默认为0，及不模糊。

var context = drawing.getContext("2d"); context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur = 4; context.shadowColor = "rgba(0, 0, 0, 0.5)"; context.fillStyle = "#ff0000"; context.fillRect(10, 10, 50, 50);

渐变

渐变由CanvasGradient实例表示。通过2D上下文来创建和修改： createLinearGradient():创建一个新的线性渐变。4个参数：起点的x，y坐标，终点的x,y坐标。返回CanvasGradient实例。创建完后，使用addColorStop():指定色标。两个参数：色标位置（0-1）和CSS颜色值。

var context = drawing.getContext("2d"),gradient = context.createLinearGradient(30, 30, 70, 70); gradient.addColorStop(0, "white");gradient.addColorStop(1, "black");context.fillStyle = gradient;context.fillRect(30, 30, 50, 50);

也可以创建径向渐变：createRadialGradient():6个参数：对应着两个圆的圆心和半径。前三个是起点圆的圆心和半径，后三个是终点圆的。

gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);

模式

其实就是重复的图像，可以用来填充或描边图形。 createPattern():2个参数，一个元素和一个表示如何重复图像的字符串，（repeat,repate-x,repeat-y,no-repeat)

var context = drawing.getContext("2d"),image = document.images[0],pattern = context.createPattern(image, "repeat");context.fillStyle = pattern;context.fillRect(10, 10, 150, 150);

createPattern()的第一个参数可以是元素或另一个元素。

使用图像数据

getImageData():取得原始图像数据。4个参数，要取得其数据的画面区域的x，y坐标以及该区域的像素宽度和高度。返回一个ImageData的实例。每个ImageData对象有三个属性。width,height和data（一个数组，保存着图像中每个像素的数据，每个像素用4个元素保存，红，绿，蓝，透明度）

var imageData = context.getImageData(10,5,50,50);var data = imageData.data,red = data[0],green = data[1],blue = data[2],alpha = data[3];

putImageData(ImageData，x,y):方法把图像数据绘制到画布上。

合成

globalAlpah:介于0-1的值，用于指定所有绘制的透明度。 globalCompositionOperation:表示后绘制的图形怎样与先绘制的图形结合。可能的值如下： source-over(默认值)：后绘制的图形位于先绘制图形的上方。 source-in:两者重叠的部分可见，其他部分完全透明。 source-out:后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形完全透明。 source-atop:后绘制的图形与先绘制的图形重叠的部分可见,先绘制的图形不受影响。 destination-over:后绘制的图形位于先绘制图形的下方，只有之前透明像素下的部分才可见。 destination-in:后绘制的图形位于先绘制图形的下方，两者不重叠的部分完全透明。 destination-out:后绘制的图形擦除与先绘制图形重叠的部分。 destination-atop:后绘制的图形位于先绘制图形的下方,在两者不重叠的地方，先绘制的图形变透明。 lighter:后绘制的图形与先绘制的图形重叠部分的值相加，使该部分变亮。 copy:后绘制的图形完全取代与之重叠的先绘制图形。 xor:后绘制的图形与先绘制的图形重叠部分执行“异或”操作。