canvas 学习

简介

标签是 HTML5 中新定义的标签，它是一个画布标签，只是作为一个图形容器，必须使用脚本来绘制图形。

Canvas基本使用

1. <canvas> 标签
    <canvas>只有两个可选属性：width, height, 如果不给宽高设定初始值时，则默认width为300，height为150，不建议使用CSS样式表来给其设置宽高

2. 替换内容
    IE9版本以前的浏览器不支持<canvas> 标签，则可在标签中间写上文字可作为文本替换，在支持<canvas> 标签的浏览器中，则不会显示替换文本内容。

3. 渲染上下文
    <canvas>会创建一个固定大小的画布，会更公开一个或者是多个画笔工具，也就是渲染上下文用来绘制和处理展示的内容。

var canvas = document.getElementById('canvas');
if(!canvas.getContext) return; //检测支持性
var cxt = canvas.getContent('2d');

绘制形状

1. 栅格和坐标空间
    <canvas>元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标（0,0））。所有元素的位置都相对于原点来定位。

2. 绘制矩形
    <canvas>仅支持绘制一种原生的图形，矩形。
    提供了三种绘制方案

  • 填充矩形：fillRect(x, y, width, height)
  • 边框矩形（非实心）：strokeRect(x, y, width, height)
  • 清除指定矩形区域：clearReact(x, y, width, height)

    其中，（x,y）是指矩形左上角的坐标，相当于是矩形的原点
    width, height是指矩形的宽高

3. 绘制路径
    图形的基本元素是路径。
    路径是通过不同颜色和宽度的线段或者曲线相连形成的不同形状的点的集合。
    一个路径，甚至一个子路径，都是闭合的。

  • 绘制路径的步骤：

　　1） 创建路径的起点
　　2） 调用绘制方法来绘制路径
　　3） 把路径封闭
　　4） 路径生成，即可描边和填充路径以渲染图形。

  • 绘制路径的方法：

　　beginPath()：创建一条新路径，图形绘制命令被指向到路径上来生成路径。
　　moveTo(x, y): 把画笔移动到指定目标，设置路径的起始坐标
　　lineTo(x, y): 绘制一条从当前位置到指定坐标的直线
　　closePath(): 闭合路径，图形绘制命令重新指向上下文。
　　stroke(): 通过线条来绘制图形轮廓
　　fill(): 填充内容区域来生成实心图形
　　注意：stroke不会自动闭合路径，但是fill是可以自动闭合路径的。

  • 实例：绘制三角形
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return; //检测支持性
var cxt = canvas.getContent('2d'); 
cxt.beginPath();
cxt.moveTo(50, 50);
cxt.lineTo(150, 50);
cxt.lintTo(150, 150);
cxt.closePath();
cxt.stroke();

 

4. 绘制圆弧

  • arc(x, y, r, startAngle, endAngle, anticlockwise)

　　以（x, y）为圆心，以r为半径，从startAngle弧度开始到endAngle弧度结束，anticlockwise是布尔值，true表示逆时针，false表示顺时针（默认顺时针）
　　注意：1. 这里的度数都是弧度； 2. 0弧度是指的x轴正方形。

  • arcTo(x1, y1, x2, y2, radius)：绘制的圆弧就是两条直线相切的与圆弧

5. 绘制贝塞尔曲线

    贝塞尔曲线是应用二维图形应用程序的数学曲线。
    一般的矢量图形软件通过它来精确画出曲线贝兹曲线由线段与节点组成，节点是可拖动的支点，线段可伸缩。
    一次贝塞尔曲线是一条直线

  • 绘制二次贝塞尔曲线

　　quaddratixCurveTo(cp1x, cp2y, x, y)
　　cp1x, cp2y: 控制点的坐标
　　x, y: 结束点的坐标

  • 绘制三次贝塞尔曲线

　　bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
　　cp1x, cp1y: 控制点1的坐标
　　cp2x, cp2y: 控制点2的坐标
　　x, y: 结束点的坐标

6. 添加样式和颜色

  •     给图形填充颜色： fillStyle = color
  •     给图形轮廓填充颜色： strokeStyle = color

　　注意：为图形设置不同的颜色需要重新设置fillStyle 和strokeStyle

  •     透明度： globalAlpha = transparencyValue

　　这个属性会影响到Canvas上所有图形透明度，有效值是从0.0到1.0
　　如果要设置单个图形的透明度，可以使用rgba()

  •     线宽： lineWidth = value

　　只能为正值，默认为1.0

  • 线段末端样式： lineCap = butt/round/squre

　　butt：线段末端以方形结束
　　round：线段末端以圆形结束
　　square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

  • 设置线条与线条之间接合处样式： lineJoin = round/bevel/miter(默认)

　　round：通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。 圆角的半径是线段的宽度。

　　bevel：在相连部分的末端填充一个额外的以三角形为底的区域， 每个部分都有各自独立的矩形拐角。

　　miter(默认)：通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。

  • 虚线：使用setLineDash方法和lineDashOffset属性来设置

　　setLineDash([x, y]): 接受一个数组，来制定线段与间隙之间的交替，x是实线长度，y是间隔长度
　　lineDashOffset：该属性设置起始偏移量.
　　getLineDash():返回一个包含当前虚线样式，长度为非负偶数的数组。

  • 绘制文本

　　fillText(text, x,y [, maxWidth])：在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的。
　　strokeText(text, x, y [, maxWidth])：在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.
　　font = "font-size font-family"：与CSS font属性语法相同
　　textAlign = start(默认)/end/left/right/center：文本对齐项
　　textBaseline = top/hanging/middle/alphabetic(默认)/ideographic/bottom：基线对齐选项
　　direction = inherit(默认)/ltr/rtl：文本方向

  • 绘制图片
//创建一个img元素，并且设置其源地址
var img = new Image();
img.src = 'xxx.png';
//保证img渲染完成后在进行drawImage
img.onload = function() {
　　ctx.drawImage(img, 0, 0);
}

　　drawImage(image, x, y, width, height)： 其中width和height是指用来当canvas 画入多少时缩放的大小

　　drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：切片
　　后面8个参数分别为：
　　　　前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。

7. 状态的保存和恢复

    save 和 restore 方法是用来保存和恢复 canvas 状态的, canvas的状态存储是保存在栈中的。

    当save()方法被调用后，当前状态就会被推送到栈中保存。其中状态表示为：

  • 当前应用的变形（移动，缩放，和旋转）
  • 图形的样式设置
  • 剪裁的路径

    restore()：上一个保存状态从栈中弹出，所有设定恢复。

8. 变形

    translate(x, y)：移动canvas的原点到指定位置，其中x是左右偏移量，y是上下偏移量。

    rotate(angle)：旋转坐标轴，按照顺时针的方向，以弧度为单位的值。

    scale(x, y)：增减canvas中的像素数目，对形状和位图进行缩小或放大。其中，x,y分别是横轴和纵轴的缩放值，它们都必须是正值。值比 1.0 小表示缩 小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。

    transform(a, b, c, d, e, f)：变形矩阵

9. 合成

globalCompositeOperation = source-over(default)/source-in/source-out/source-atop/destination-over/destination-in/destination-out/destination-atop/lighter/darken/lighten/xor/copy

    source-over(default)：这是默认设置，新图像会覆盖在原有图像。
    source-in：仅仅会出现新图像与原来图像重叠的部分，其他区域都变成透明的。(包括其他的老图像区域也会透明)
    source-out：仅仅显示新图像与老图像没有重叠的部分，其余部分全部透明。(老图像也不显示)
    source-atop：新图像仅仅显示与老图像重叠区域。老图像仍然可以显示。
    destination-over：新图像会在老图像的下面。
    destination-in：仅仅新老图像重叠部分的老图像被显示，其他区域全部透明。
    destination-out：仅仅老图像与新图像没有重叠的部分。 注意显示的是老图像的部分区域。
    destination-atop：老图像仅仅仅仅显示重叠部分，新图像会显示在老图像的下面。
    lighter：新老图像都显示，但是重叠区域的颜色做加处理
    darken：保留重叠部分最黑的像素。(每个颜色位进行比较，得到最小的)
    lighten：保证重叠部分最量的像素。(每个颜色位进行比较，得到最大的)
    xor：重叠部分会变成透明
    copy：只有新图像会被保留，其余的全部被清除(边透明)

10. 裁剪路径

 clip()：把已经创建的路径转换成裁剪路径。裁剪路径的作用是遮罩。只显示裁剪路径内的区域，裁剪路径外的区域会被隐藏。

    注意：clip()只能遮罩在这个方法调用之后绘制的图像，如果是clip()方法调用之前绘制的图像，则无法实现遮罩。

11. 动画

    动画的基本步骤：

  • 清空canvas：再绘制每一帧动画之前，需要清空所有。清空所有最简单的做法就是clearRect()方法
  • 保存canvas状态：如果在绘制的过程中会更改canvas的状态(颜色、移动了坐标原点等),又在绘制每一帧时都是原始状态的话，则最好保存下canvas的状态
  • 绘制动画图形：这一步才是真正的绘制动画帧
  • 恢复canvas状态：如果你前面保存了canvas状态，则应该在绘制完成一帧之后恢复canvas状态。

    控制动画方法：

  • setInterval()
  • setTimeout()
  • requestAnimationFrame()

 

 

 

 

 

 

————————————————
版权声明：本文为CSDN博主「清晓花浅笑」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u013982744/article/details/98883124

posted @ 2020-01-03 14:55  真的想不出来  阅读(418)  评论(0)  编辑  收藏  举报