HTML5 画布"重磅"知识点

小鱼儿 2022-02-24 15:30 426阅读 0赞

## 碎碎念 ##

使用 canvas>元素不是非常难但你需要一些基本的HTML和JavaScript知识。最基础的反而是最重磅的；所有需求的实现大致方向都是建立在你的基础知识上的思考；盖房子都是要有稳固的地基；…好了，严肃点，进入正题，我们开始讲混凝土的构成…

##### 画布可以做什么 #####

> canvas是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画.

##### 画布的由来 #####

> canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 canvas 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。

##### 体验画布 #####

> Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。但是，可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。

1.  设置画布宽为600，高为400。准备绘制工具，利用工具绘图

1.  获取上下文，绘制工具箱

let cxt = myCan.getContext('2d')

1.  移动画笔，设置起点

cxt.moveTo(0,0)

1.  绘制直线 (轨迹，绘制路径)

cxt.lineTo(400,600)

1.  描边

cxt.stroke()

##### 总结延伸知识点 #####

1.  画布的坐标系是以左上角为原点，向右为X轴，向下为Y轴
2.  默认宽高是300\*150,但是尽量不要使用CSS重新定义

> 该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。 如果你绘制出来的图像是扭曲的, 尝试用width和height属性为canvas明确规定宽高，而不是使用CSS。

1.  getContext(‘2d’),暂时没有3d  
    (WebGL (Web图形库) 是一种JavaScript API\]([https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL\_API][https_developer.mozilla.org_zh-CN_docs_Web_API_WebGL_API])  
    [web gl 绘制3d效果的网页技术][web gl _3d]
2.  stroke()是描边，fill()是填充

## 1px像素模糊现象 ##

##### 绘制两条平行线 #####

线条默认的宽度是1px；默认颜色是黑色

cxt.moveTo(10,10)
        cxt.lineTo(10,200)
    
        cxt.moveTo(90,10)
        cxt.lineTo(90,200)

##### 模糊 #####

当我们放大的时候，更容易看到线条是模糊，可能会认为反正正常显示看起来正常；但是放到移动端？或则有些人是像素眼…  
![部分截图][20190404194733304.png]

1.  产生的原因  
    对齐的点是中心线的位置，会把1px的线分成两个0.5px；即绘制的线条会从路径的中央向两端扩展。但是计算机不会只绘制1px(0.5-1.5)这一个像素，它会把0-0.5和1.5-2之间的内容会被更浅颜色的内容填充，一共是2px会被填充，即原来按照中心线对齐的1px,接着是延展出去的左右0.5px  
    ![图片][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]
2.  解决  
    让绘制的路径起点从一个像素的中心开始，那么当向两端扩展的时候，恰好填满一个像素。

cxt.moveTo(10.5,10)
        cxt.lineTo(10.5,200)
    
        cxt.moveTo(90.5,10)
        cxt.lineTo(90.5,200)

## 绘制 ##

先通过绘制，来对画布一些API和画布有一个基本的了解

##### 绘制三角形 #####

let myCan = document.getElementById('myCan')
        let cxt = myCan.getContext('2d')
        cxt.moveTo(50,10)
        cxt.lineTo(70,10)
        cxt.lineTo(50,60)
        cxt.stroke()

1.  起始点和lineTo的结束点无法完全闭合缺角
2.  解决1：在给一条线`cxt.lineTo(50,10)`
3.  解决2：闭合路径`cxt.closePath()`

##### 绘制虚线 #####

setLineDash()方法在填充线时使用虚线模式。 它使用一组值来指定描述模式的线和间隙的交替长度。

let cxt = myCan.getContext('2d')
        cxt.moveTo(60,60)
        cxt.lineTo(205,60)
        cxt.setLineDash([20])
        cxt.stroke()

getLineDash() 是 Canvas 2D API 获取当前线段样式的方法。(获取虚线的排列方式 获取的是不重复的那一段的排列方式)

console.log(cxt.getLineDash())

lineDashOffset 是 Canvas 2D API 设置虚线偏移量的属性。正值是向后偏移；负值是向前偏移。这里我们设置向后偏移20

cxt.lineDashOffset = 20

##### 绘制渐变的矩形(点是由线构成原理) #####

var myCan = document.querySelector('#myCan')
        var cxt = myCan.getContext('2d')
        cxt.lineWidth = 40
        for (var i = 0; i < 255; i++) { 
            cxt.beginPath()
            cxt.moveTo(i-1,20)
            cxt.lineTo(i,20)
            cxt.strokeStyle = 'rgb('+i+',0,0)'
            cxt.stroke()
        }

##### 绘制渐变的矩形(fillRect) #####

var myCan = document.getElementById('myCan')
        var cxt = myCan.getContext('2d')
        // 创建一个渐变方案，
        var linearGradient = cxt.createLinearGradient(100,100,500,100)
        linearGradient.addColorStop(0,'green')
        linearGradient.addColorStop(0.5,'red')
        linearGradient.addColorStop(1,'blue')
        cxt.fillStyle = linearGradient
        cxt.fillRect(100,100,500,100)

##### 绘制笑脸 #####

var myCan = document.querySelector('canvas')
        var cxt = myCan.getContext('2d')
        //1. 画脸（实际是一个大圆）
        cxt.beginPath()
        cxt.arc(200,200,100,0,Math.PI*2,true)
        //2. 左眼
        cxt.moveTo(160,150) //防止接上上一个线的末端，以开始画的点为起点
        cxt.arc(150,150,10,0,Math.PI*2)
        //3. 右眼
        cxt.moveTo(260,150)
        cxt.arc(250,150,10,0,Math.PI*2)
        //4. 口
        cxt.moveTo(250,200)
        cxt.arc(200,200,50,0,Math.PI)
        cxt.stroke()

##### 绘制一个随机颜色六等分的圆 #####

1.  获取一个区间内的随机整数

function ranNum(min,max){ 
                return parseInt(Math.random()*(max-min+1)+min)
        }

1.  获取一个随机颜色

function ranColor(min,max){ 
            return `rgb(${ numColor()},${ numColor()},${ numColor()})`
        }

1.  所有代码

// 获取画布
        let myCan = document.querySelector('canvas')
        let cxt = myCan.getContext('2d')
        // 获取一个区间内随机整数
        function ranNum(min,max){ 
            return function () { 
                return parseInt(Math.random()*(max-min+1)+min)
            }
        }
        //获取0-255的随机整数
        let numColor = ranNum(0,255)
        // 获取随机颜色
        function ranColor(min,max){ 
            return `rgb(${ numColor()},${ numColor()},${ numColor()})`
        }
        // 初始化分为6等份的圆
        let num = 6
        // 一个圆每次转动的弧度
        let angle = Math.PI * 2/num
        // 绘制
        for (var i = angle;i <= Math.PI * 2 ;i = i + angle ){ 
            cxt.beginPath()
            cxt.moveTo(300,200)//原点坐标
            cxt.arc(300,200,100,i,i + angle)
            cxt.fillStyle = ranColor()
            cxt.fill()
        }

## 填充规则(非零环绕) ##

顺时针画两个正方形，一个内嵌

cxt.moveTo(10,10)
        cxt.lineTo(200,10)
        cxt.lineTo(200,200)
        cxt.lineTo(10,200)
    
        cxt.moveTo(50,50)
        cxt.lineTo(150,50)
        cxt.lineTo(150,150)
        cxt.lineTo(50,150)
        cxt.fillStyle = 'red'
        cxt.fill()

内嵌的正方形改为逆时针画法

cxt.moveTo(10,10)
        cxt.lineTo(200,10)
        cxt.lineTo(200,200)
        cxt.lineTo(10,200)
    
        cxt.moveTo(50,50)
        cxt.lineTo(50,150)
        cxt.lineTo(150,150)
        cxt.lineTo(150,50)
    
        cxt.fillStyle = 'yellow'
        cxt.fill()

画完发现明明是两种一样的正方形，为什么填充后，第二种没有按想象的填充。是因为他们遵循着非零环绕的填充规则  
![填充规则][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]

##### 通过这个案例来解释一下区域是否填充问题 #####

1.  看该区域是否填充，从该区域拉一条线出来
2.  看与该线的相交轨迹是顺时针还是逆时针
3.  如果是顺时针则+1,逆时针则-1
4.  所有轨迹的值计算加起来看是否为0
5.  如果为0，则不填充；不为0；则填充  
    ![案例解析][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]  
    又要吹一波我的画工，真的是栩栩如生，生动形象的解释出来问题所在

## 知识点 ##

#### 基本 ####

1.  getContext(‘2d’):HTMLCanvasElement.getContext() 方法返回canvas 的上下文，如果上下文没有定义则返回 null .表示一个二维渲染上下文
2.  moveTo(x,y):将一个新的子路径的起始点移动到(x，y)坐标的方法
3.  lineTo(x,y):使用直线连接子路径的终点到x，y坐标的方法（并不会真正地绘制）。
4.  stroke(): 使用非零环绕规则，根据当前的画线样式，绘制当前或已经存在的路径的方法。
5.  strokeStyle: 描述画笔（绘制图形）颜色或者样式的属性。默认值是 \#000 (black)。
6.  fill(): 根据当前的填充样式，填充当前或已存在的路径的方法。采取非零环绕或者奇偶环绕规则。
7.  fillStyle: 使用内部方式描述颜色和样式的属性。默认值是 \#000 （黑色）。
8.  beginPath(): 通过清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。
9.  closePath(): 将笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。 如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。**简单点说，闭合路径**

#### 线相关的属性和方法 ####

*  setLineDash(\[\]):设置虚线，数组是用来描述你的排列方式的
 *  getLineDash():获取当前线段样式的方法。返回一个 Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。如果数组元素的数量是奇数，数组元素会被复制并重复。
 *  lineDashOffset: 设置虚线偏移量的属性
 *  lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有3个可能的值，分别是：butt, round and square。默认值是 butt。  
    **butt**:线段末端以方形结束。  
    **round**:线段末端以圆形结束。  
    **square**:线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。
 *  lineJoin 是 Canvas 2D API 用来设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）。  
    **round**:通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。  
    **bevel**在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。  
    **miter**通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。这个设置可以通过 miterLimit 属性看到效果。默认

cxt.lineWidth = 10
        cxt.beginPath()
        cxt.moveTo(10,30)
        cxt.lineTo(60,70)
        cxt.lineTo(120,30)
        cxt.lineCap = 'square'
        cxt.lineJoin = 'round'
        cxt.stroke()

#### 规则图形 ####

##### strokeRect()和fillRect() #####

\*\*strokeRect()\*\*方法绘制一个描边矩形，其起点为(x, y) ，其大小由宽度和高度指定。

void ctx.strokeRect(x, y, width, height);

**fillRect()** 绘制填充矩形的方法

void ctx.fillRect(x, y, width, height);

矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height ，fillStyle，strokeStyle 属性决定矩形的样式。

##### arc #####

绘制圆弧路径的方法。 圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。

void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

deg = 360°/（Math.PI*2 * angel）  //弧度与度的公式

1.  x：圆弧中心（圆心）的 x 轴坐标。y：圆弧中心（圆心）的 y 轴坐标。
2.  radius：圆弧的半径。
3.  startAngle：圆弧的起始点， x轴方向开始计算，单位以弧度表示。endAngle：圆弧的终点， 单位以弧度表示。
4.  anticlockwise 可选的Boolean值 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制。

ctx.arc(75, 75, 50, 0, 2 * Math.PI) //圆形

#### 渐变 ####

createLinearGradient()方法创建一个沿参数坐标指定的直线的渐变。该方法返回一个线性 CanvasGradient对象。  
CanvasGradient.addColorStop() 方法添加一个由偏移值和颜色值指定的断点到渐变。如果偏移值不在0到1之间，将抛出INDEX\_SIZE\_ERR错误，如果颜色值不能被解析为有效的CSS颜色值 ，将抛出SYNTAX\_ERR错误。  
**offset**:0到1之间的值，超出范围将抛出INDEX\_SIZE\_ERR错误  
**color**:CSS颜色值 color。如果颜色值不能被解析为有效的CSS颜色值 ，将抛出SYNTAX\_ERR错误。

void gradient.addColorStop(offset, color);

var gradient = ctx.createLinearGradient(0,0,200,0);
    gradient.addColorStop(0,"green");
    gradient.addColorStop(1,"white");
    ctx.fillStyle = gradient;
    ctx.fillRect(10,10,200,100);

#### 获取画布宽高 ####

var myCan = document.querySelector('canvas')
        var cxt = myCan.getContext('2d')
        // 获取画布宽度:建议第一种
        console.log(cxt.canvas.width)
        console.log(cxt.canvas.offsetWidth)
        console.log(myCan.width)
        console.log(myCan.offsetWidth)
        //获取画布高度
        console.log(cxt.canvas.height)
        console.log(cxt.canvas.offsetHeight)
        console.log(myCan.height)
        console.log(myCan.offsetHeight)
        //当然还要其他一些方法...

#### 文字 ####

##### 在画布中心绘制文字并画线 #####

var myCan = document.querySelector('canvas')
        var cxt = myCan.getContext('2d')
        // 在画布的中心绘制文字
        let w = cxt.canvas.width/2
        let h = cxt.canvas.height/2
        cxt.font = '60px Microsoft YaHei'
        cxt.textAlign = 'center'
        cxt.textBaseline = 'middle'
        cxt.fillText('Hello World',w,h)
        console.log(cxt.measureText('Hello World'))
        // 获取文字的宽度
        let wordWidth = cxt.measureText('Hello World').width
        cxt.beginPath()
        cxt.moveTo(w - wordWidth /2 ,h +20)
        cxt.lineTo(w + wordWidth /2 ,h +20)
        cxt.stroke()

##### font #####

> 是 Canvas 2D API 描述绘制文字时，当前字体样式的属性。 使用和 CSS font 规范相同的字符串值。 默认字体是 10px sans-serif.

ctx.font = value;

##### textAlign #####

> 描述绘制文本时，文本的对齐方式的属性。textAlign的值为center时候文本的居中是基于你在fillText的时候所给的x的值，也就是说文本一半在x的左边，一半在x的右边

**left**:文本左对齐。  
**right**:文本右对齐。  
**center**:文本居中对齐。  
**start**:文本对齐界线开始的地方 （左对齐指本地从左向右，右对齐指本地从右向左）。  
**end**:文本对齐界线结束的地方 （左对齐指本地从左向右，右对齐指本地从右向左）。  
默认值是 start。

##### textBaseline #####

> textBaseline 是 Canvas 2D API 描述绘制文本时，当前文本基线的属性。决定文字垂直方向的对齐方式。

**top**:文本基线在文本块的顶部。  
**hanging**:文本基线是悬挂基线。  
**middle**:文本基线在文本块的中间。  
**alphabetic**:文本基线是标准的字母基线。  
**ideographic**:文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。  
**bottom**:文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。  
默认值是 alphabetic。

##### fillText #####

**text**使用当前的 font, textAlign, textBaseline 和 direction 值对文本进行渲染。  
**x**文本起点的 x 轴坐标。  
**y**文本起点的 y 轴坐标。  
**maxWidth 可选** 绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。

void ctx.fillText(text, x, y [, maxWidth]);

#### 坐标转换 ####

1.  scale：改变画布大小（缩放x，y轴）  
    scale() 是 Canvas 2D API 根据 x 水平方向和 y 垂直方向，为canvas 单位添加缩放变换的方法。

void ctx.scale(x, y);

1.  translate(x,y) 参数表示移动目标点的坐标  
    translate() 是 Canvas 2D API 通过在网格中移动 canvas 和 canvas 原点 x 水平方向、原点 y 垂直方向，添加平移变换的方法。
2.  rotate 旋转坐标轴  
    rotate() 是 Canvas 2D API 在变换矩阵中增加旋转的方法。角度变量表示一个顺时针旋转角度并且用弧度表示。

##### 让正方形每隔一段时间旋转1deg #####

let myCan = document.querySelector('canvas');
        let cxt = myCan.getContext('2d');
        let startAngle = 0
        cxt.translate(150,150);
        setInterval(function () { 
            startAngle += Math.PI/100;
            cxt.rotate(startAngle);
            cxt.strokeRect(-50,-50,100,100);
        },500);

## drawImage ##

> drawImage() 方法提供了多种方式在Canvas上绘制图像。

void ctx.drawImage(image, dx, dy);
    void ctx.drawImage(image, dx, dy, dWidth, dHeight);

1.  image:绘制到上下文的元素。允许任何的 canvas 图像源
2.  dx:image的左上角在目标canvas上 X 轴坐标。
3.  dWidth可选:image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

## 参考文档 ##

[画布 API][API]  
[canvas 1px像素模糊现象解决方案][canvas 1px]  
[canvas lineWidth绘制原理][canvas lineWidth]

[https_developer.mozilla.org_zh-CN_docs_Web_API_WebGL_API]: https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API
[web gl _3d]: http://www.hewebgl.com/article/getarticle/108
[20190404194733304.png]: /images/20220224/89dc40aa928745dd8288a20944490ea6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220224/d500f2ec904a40c48eff0802871a57df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220224/98228f2cee4048e1a52507c2a376f52a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]: /images/20220224/5641dad191b0400bad436d1c18912e75.png
[API]: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
[canvas 1px]: http://www.softwhy.com/article-8820-1.html
[canvas lineWidth]: http://www.softwhy.com/article-9159-1.html