第十五章 使用 Canvas 绘图

hghh
571 阅读8分钟

基本用法

  1. 使用 canvas 元素，必须先设置 width 和 height 属性，指定绘图区域大小

  2. 取得绘图上下文：使用 getContext() 方法，传入上下文名字，传入"2d"可以取得2D上下文对象

  3. 导出绘制的图像：使用 toDataURL() 方法，接收一个图像的 MIME 类型格式的参数

    <canvas id = "drawing" width = "200" height = "200">A drawing</canvas>

var drawing = document.getELementById("drawing");
//确定浏览器是否支持<canvas>
if(drawing.getContext){ 
    var context = drawing.getContext("2d");
    
    //取得图像数据URI
    var imgURI = drawing.toDataURL("image/png");
    
    //显示图像
    var image = document.createElement("img");
    immage.src = imgURI;
    document.body.appendChild(image);
}

2D上下文

save()：将当前的所有设置保存进一个栈结构，可以通过 restore ()方法一步一步返回之前保存的设置

restore()：在保存设置的栈结构中向前返回一级，恢复上一级的状态

填充和描边

填充和描边分别取决于两个属性：fillStyle 和 strokeStyle 。这两个属性的值可以是字符串、渐变对象或模式对象，默认值为"#000000"。

绘制矩形

  • fillRect()：绘制的矩形会使用指定颜色填充，颜色通过 fillStyle 属性指定
  • strokeRect()：绘制的矩形会使用指定颜色描边，描边颜色通过 strokeStyle 属性指定
  • clearRect()：清除画布上的矩形区域

这三个方法都接收四个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度、矩形高度

//绘制红色矩形
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);

绘制路径

  1. 调用 beginPath() 方法，表示开始绘制新路径
  2. 调用下列方法绘制路径
    • arc(x , y , radius , startAngle , endAngle , counterclockwise)：以(x, y)为圆心绘制一条弧线，弧线半径为 radius ，起始和结束角度(用弧度表示)分别为 startAngle 和 endAngle 。counterclockwise 表示起始和结束角度是否按逆时针方向计算( false 表示按顺时针计算)
    • 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)，不画线
    • quadraticCurveTo(cx , cy , x , y)：从上一点开始绘制一条二次曲线，到(x , y)为止，并且以(cx , cy)为控制点
    • rect(x , y , width , height)：从点(x , y)开始绘制一个矩形，该方法绘制的是矩形路径，而不是 strokeStyle() 和 fillRect() 所绘制的独立形状
  3. 创建了路径后续操作
    • 如果想绘制一条连接到路径起点的线条，可以调用 closePath()
    • 如果路径已经完成，你想用 fillStyle 填充它，可以调用 fill()方法
    • 另外，还可以调用 stroke() 方法对路径描边，描边使用的是 strokeStyle
    • 最后还可以调用 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 坐标，用于在路径被关闭之前确定画布上的某一点是否位于路径上

绘制文本

  • fillText()：使用 fillStyle 属性绘制文本
  • strokeText()：使用 strokeStyle 属性绘制文本

这两个方法都接收4个参数：要绘制的文本字符串、 x 坐标、 y 坐标、最大像素宽度(可选)，并以下列3个属性为基础：

  • font：文本样式
  • textAlign：文本对齐方式，可取值"start"、"end"、"left"、"right"、"center"，建议选"start"、"end"代替"left"、"right"
  • textBaseline：文本的基线，可取值"top"、"hanging"、"middle"、"alphabetic"、"ideographic"、"bottom"

measureText()：辅助确定文本大小，接收一个参数：要绘制的文本，返回一个 TextMetrics 对象，该对象有一个 width 属性。

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

变换

  • rotate(angle)：围绕原点旋转图像 angle 弧度

  • scale(scaleX , 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()

绘制图像

drawImage() ：将一幅图绘制到画布上，可传入9个参数（前三个为必选）：要绘制的图像、源图像的 x 坐标、源图像的 y 坐标、源图像的宽度、源图像的高度、目标图像的 x 坐标、目标图像的 y 坐标、目标图像的宽度、目标图像的高度。只传前五个参数时前五个为目标图像。

绘制的图像可以来自于 img 元素，也可以来自另一个 canvas 画布，但是不能来自于不同的域（如 www.wrox.com 和 www.example.com）

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

阴影

可根据以下几个属性的值，自动为形状或路径绘制出阴影：

  • shadowColor：阴影颜色，默认为黑色
  • shadowOffsetX：形状或路径 x 轴方向的阴影偏移量，默认为0
  • shadowOffsetY：形状或路径 y 轴方向的阴影偏移量，默认为0
  • shadowBlur：模糊的像素数，默认为0，即不模糊
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = "rgba(0, 0, 0, 0.5 )";

渐变

渐变由 CanvasGradient 实例表示。

绘制渐变步骤：

  • createLinearGradient() ：创建一个新的线性渐变，该方法接收4个参数：起点的 x 坐标、起点的 y 坐标、终点的 x 坐标、终点的 y 坐标，返回一个 CanvasGradient 对象的实例
  • addColorStop()：指定色标，接收两个参数：色标位置、css 颜色值。色标位置是一个0（开始的颜色）到1（结束的颜色）之间的数字
  • 把 fillStyle 或 strokeStyle 设置为这个对象，使用渐变绘制形状或描边
var 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个参数——前三个参数指定起点圆的圆心（x 和 y）及半径，后三个参数指定终点圆的圆心（x 和 y）及半径。

模式

模式其实就是重复的图像，可以用来填充或描边图形。

createPattern()：创建一个新模式，接收两个参数：一个 HTML<img> 元素(也可以是一个<canvas>或<video>元素)、表示如何重复图像的字符串(值与 css 的 background-repeat 属性值相同，包括"repeat"、"repeat-x"、"repeat-y"、"no-repeat")

var image = document.images[0];
	pattern = context.createPattern(image, "repeat");

context.fillStyle = pattern;
context.fillReact(10, 10, 150, 150);

使用图像数据

getImageData()：取得原始图像数据，接收4个参数：要取得数据的画面区域的 x 、y 坐标、区域的像素宽度和高度，返回的对象是 ImageData 实例，有3个属性： width 、 height 和 data。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];

合成

  • globalAlpha：指定所有绘制的透明度，介于 0 和 1 之间
  • globalCompositionOperation：后绘制的图形怎样与先绘制的图形结合，值为字符串，可能值为下：
    • source-over（默认值）：后绘制的图像位于先绘制的图形的上方
    • source-in：后绘制的图形与先绘制的图形重叠的部分可见，两者其他部分完全透明
    • source-out：后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形完全透明
    • source-atop：后绘制的图形与先绘制的图形重叠部分可见，先绘制的图形不受影响
    • destination-over：后绘制的图形位于先绘制的图形下方，只有之前透明像素下的部分可见
    • destination-in：后绘制的图形位于先绘制的图形下方，两只不重叠的部分完全透明
    • destinatio-out：后绘制的图形擦除与先绘制的图形重叠的部分
    • destination-atop：后绘制的图形位于先绘制的图形下方，在两者不重叠的地方，先绘制的图形会透明
    • lighter：后绘制的图形与先绘制的图形的重叠部分的值相加，使该部分变亮
    • copy：后绘制的图形完全替代与之重叠的先绘制图形
    • xor：后绘制的图形与先绘制的图形重叠的部分执行"异或"操作

WebGL

avatar
文章
阅读
粉丝