Canvas学习之基础知识

Canvas 原点坐标

canvas 是一个二维网格

canvas 的左上角坐标为 (0,0)，即左上角为原点坐标。

学习资料

文章

菜鸟教程-canvas
菜鸟教程-参考手册

vue + canvas 简单绘图代码
html5 （canvas） +css+js 实现画图工具

视频

插件学习

Fabric.js
Fabric.js学习笔记
vue结合 Fabric.js 实现鼠标拖动画布、滚轮缩放画布的功能
ZRender
ZRender官网

创建一个画布（Canvas）

<!--canvas默认大小300*150-->
<canvas id="myCanvas"
        width="800"
        height="500">
</canvas>

    #myCanvas {
      background-color: rgb(247, 247, 247);
      border: thin solid blue;
      position: relative;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
    }

创建context 对象

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

var canvas=document.getElementById("myCanvas")
var ctx=canvas.getContext("2d")

绘制矩形（填充）

填充色：设置fillStyle属性，可以是CSS颜色，渐变，或图案。默认设置是#000000（黑色）。

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 填充颜色
ctx.fillStyle = '#FF0000'
// 起始点x y坐标   宽   高
ctx.fillRect(10, 10, 700, 400)

绘制路径

线条颜色：设置strokeStyle属性，可以是CSS颜色，渐变。默认设置是#000000（黑色）。
线条宽度：设置lineWidth属性，当前线条的宽度，以像素计。默认1。
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
stroke() 绘制已定义的路径

绘制直线

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

//设置线条宽度以及颜色
ctx.lineWidth = 10
ctx.strokeStyle = 'red'
//开始点坐标
ctx.moveTo(0, 0)
//结束点坐标
ctx.lineTo(200, 100)
ctx.stroke()

绘制圆

beginPath() ：起始一条路径，或重置当前路径。
arc(x,y,r,start,stop) ：圆心的x、y轴坐标以及开始、结束的弧度

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

ctx.strokeStyle = 'red'
ctx.beginPath()
ctx.arc(100, 100, 40, 0, 2 * Math.PI)
ctx.stroke()

绘制圆形（填充）

即先绘制一个圆路径，然后使用fill()填充当前的圆路径。

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

// 重新开始一个新路径
ctx.beginPath()
// 设置圆的参数 ：圆心的x、y轴坐标以及开始、结束的弧度
ctx.arc(200, 100, 40, 0, 2 * Math.PI)
// 绘画圆
ctx.strokeStyle = 'red'
ctx.stroke()
// 填充圆
ctx.fillStyle = 'red'
ctx.fill()

绘制文本

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

重点：
如果绘制实心的文本，可以通过fillStyle改变字体颜色，即实心文本本质上是图形；
如果绘制空心的文本，可以通过strokeStyle改变字体颜色，即空心文本本质上是路径

扩展：
1、字体样式简写，书写顺序“font-style font-weight font-size/line-height font-family"
2、font-size和font-family的值是必需的

实心文本

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

ctx.fillStyle = 'red'
ctx.font = '30px Arial'
ctx.fillText('Hello World', 10, 50)

空心文本

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')

ctx.strokeStyle = 'blue'
ctx.font = '30px Arial'
ctx.strokeText('1', 185, 115)

渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变，参数渐变开始点的坐标以及结束点的坐标
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

线条渐变

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

径向渐变

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

图像（绘制图像、画布或视频）

把一幅图像放置到画布上, 使用以下方法:drawImage(image,x,y)

var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')
//获取图片元素
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

扩展
在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height);

技巧操作

1、清空画布
context.clearRect(x,y,width,height)：矩形对象的方法，清空给定矩形内的指定像素，可用于制作橡皮擦功能。详解

ctx.clearRect(0, 0, canvas.width, canvas.height)

2、画布缩放
context.scale(scalewidth,scaleheight)：画布缩放函数，参数为数值，即缩放比例。详情

注意：
1、之前画布上的元素不参与缩放，即如果想画布整体缩放，则需要清空画布然后重新画元素。
2、缩放比例函数多次调用，会累积缩放比例。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

3、保存恢复canvas绘图数据
getImageData() 方法，它可复制画布上指定的矩形的像素数据。详情
putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。详情

createImageData() 方法，它可创建新的空白 ImageData 对象。详情

下面的代码通过 getImageData() 复制画布上指定矩形的像素数据，然后通过 putImageData() 将图像数据放回画布：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);

function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

4、画连续线段
利用lineJoin属性，设置两条线相交时，所创建的拐角类型。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();

5、toDataURL()方法，可将canvas转换为一个图片地址
canvas.toDataURL(type, encoderOptions) 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG格式。图片的分辨率为96dpi。

获取一个 data-URL

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

设置jpegs图片的质量

var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

下载画布

downLoad () {
  let url = this.canvas.toDataURL("image/png");
  let fileName = "canvas.png";
  if ("download" in document.createElement("a")) {
    // 非IE下载
    const elink = document.createElement("a");
    elink.download = fileName;
    elink.style.display = "none";
    elink.href = url;
    document.body.appendChild(elink);
    elink.click();
    document.body.removeChild(elink);
  } else {
    // IE10+下载
    navigator.msSaveBlob(url, fileName);
  }
},