《Javascript 高级程序设计(第三版)》笔记0x1B 使用 Canvas 绘图：基本用法，2D上下文

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/funkstill/article/details/85054055

目录

基本用法

2D 上下文

    填充和描边

    绘制矩形

    绘制路径

    绘制文本

    变换

    绘制图像

    阴影

    渐变

    模式

    使用图像数据

    合成

---

基本用法

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

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
	//取得图像的数据 URI
	var imgURI = drawing.toDataURL("image/png");
	//显示图像
	var image = document.createElement("img");
	image.src = imgURI;
	document.body.appendChild(image);
}

2D 上下文

    填充和描边

        填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。大多数 2D 上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性： fillStyle 和 strokeStyle。

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
  var context = drawing.getContext("2d");
  context.strokeStyle = "red";
  context.fillStyle = "#0000ff";
}

    绘制矩形

//矩形是唯一一种可以直接在 2D 上下文中绘制的形状。
var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
  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);
}

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
  var context = drawing.getContext("2d");
  //绘制红色描边矩形
  context.strokeStyle = "#ff0000";
  context.strokeRect(10, 10, 50, 50);
  //绘制半透明的蓝色描边矩形
  context.strokeStyle = "rgba(0,0,255,0.5)";
  context.strokeRect(30, 30, 50, 50);
}

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
  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);
}

    绘制路径

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
  var context = drawing.getContext("2d");
  //开始路径
  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();
}

    绘制文本

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。 scaleX和 scaleY 的默认值都是 1.0。
        translate(x, y)：将坐标原点移动到(x,y)。执行这个变换之后， 坐标(0,0)会变成之前由(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()

    绘制图像

//传入一个 HTML <img>元素
var image = document.images[0];
context.drawImage(image, 10, 10);//全图原始大小
context.drawImage(image, 50, 10, 20, 30);//全图自定义大小
context.drawImage(image, 0, 10, 50, 50, 0, 100, 40, 60);//指定区域

    阴影

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);
//绘制蓝色矩形
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);

    渐变

var gradient = context.createLinearGradient(30, 30, 70, 70);
gradient.addColorStop(0, "white");//开始颜色
gradient.addColorStop(1, "black");//结束颜色
//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//绘制渐变矩形
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

    模式

    模式其实就是重复的图像，可以用来填充或描边图形。要创建一个新模式，可以调用createPattern()方法并传入两个参数：一个 HTML <img>元素和一个表示如何重复图像的字符串。其中，第二个参数的值与 CSS 的 background-repeat 属性值相同，包括"repeat"、 "repeat-x"、"repeat-y"和"no-repeat"。

var image = document.images[0],
	pattern = context.createPattern(image, "repeat");
//绘制矩形
context.fillStyle = pattern;
context.fillRect(10, 10, 150, 150);

    使用图像数据

//要取得左上角坐标为(10,5)、大小为 50×50 像素的区域的图像数据
var imageData = context.getImageData(10, 5, 50, 50);

        这里返回的对象是 ImageData 的实例。每个 ImageData 对象都有三个属性： width、 height 和data。其中 data 属性是一个数组，保存着图像中每一个像素的数据。在 data 数组中，每一个像素用4 个元素来保存，分别表示红、绿、蓝和透明度值。

    合成

        globalAlpha 是一个介于 0 和 1 之间的值（包括 0 和 1），用于指定所有绘制的透明度。默认值为 0。如果所有后续操作都要基于相同的透明度，就可以先把 globalAlpha 设置为适当值，然后绘制，最后再把它设置回默认值 0。 

//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//修改全局透明度
context.globalAlpha = 0.5;
//绘制蓝色矩形
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);
//重置全局透明度
context.globalAlpha = 0;

    globalCompositionOperation 表示后绘制的图形怎样与先绘制的图形结合：

        source-over（默认值）：后绘制的图形位于先绘制的图形上方。
        source-in：后绘制的图形与先绘制的图形重叠的部分可见，两者其他部分完全透明。
        source-out：后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形完全透明。
        source-atop：后绘制的图形与先绘制的图形重叠的部分可见，先绘制图形不受影响。
        destination-over： 后绘制的图形位于先绘制的图形下方，只有之前透明像素下的部分才可见。
        destination-in：后绘制的图形位于先绘制的图形下方，两者不重叠的部分完全透明。
        destination-out：后绘制的图形擦除与先绘制的图形重叠的部分。
        destination-atop：后绘制的图形位于先绘制的图形下方，在两者不重叠的地方，先绘制的图形会变透明。
        lighter：后绘制的图形与先绘制的图形重叠部分的值相加，使该部分变亮。
        copy：后绘制的图形完全替代与之重叠的先绘制图形。
        xor：后绘制的图形与先绘制的图形重叠的部分执行“异或”操作。

//绘制红色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//设置合成操作
context.globalCompositeOperation = "destination-over";
//绘制蓝色矩形
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);