canvas 爬坑路【属性篇】

 

简介

<canvas> 是 HTML5 新出的一个元素用于图形的绘制，但是 <canvas> 只是图形的容器，所有的绘制工作需要在 JavaScript 内部完成。

浏览器 IE8 及以下不支持 <canvas> 标签元素。

创建 canvas 元素

// 设置其 ID 待会通过 JavaScript 来获取 canvas 元素，width 和 height 根据自己需求去写就好。
<canvas id="myCanvas" width="300" height="300">
    你的浏览器不支持 canvas，请升级你的浏览器。
</canvas>
复制代码

通过 JavaScript 来获取 canvas 元素

const canvas = document.getElementById('myCanvas')
复制代码

canvas 相关属性及其用法

getContext()

getContext() 方法返回一个用于在画布上绘图的环境。需要传入参数 '2d',然后会导出二维绘图的相关 API 注意： 目前 canvas 暂不支持3d绘图

// 首先获取 canvas 元素
const canvas = document.getElementById('myCanvas')
// 获取绘图相关 API
let ctx = canvas.getContext('2d')
复制代码

fillStyle

fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。

  • 普通填充： 
    // 首先获取 canvas 元素
const canvas = document.getElementById('myCanvas')
// 获取绘图相关 API
let ctx = canvas.getContext('2d')
// 这个颜色的值是支持 颜色名称、十六进制、RGB、RGBA、HSL、HSLA 色值的。
ctx.fillStyle = "red";
// 重点 到这里有同学是不是以为页面会出现一个 300*300 颜色为 red 的正方形了。
// 错他是不会出现的，因为文章开篇就说到了 `<canvas>` 只是图形的容器，所有的绘制工作需要在 JavaScript 内部完成。
// 接下来先绘制一个简单的 100 * 100 的正方形
ctx.fillRect(10, 10, 100, 100)
// fillRect 是一个方法后续会讲先简单的使用一下
复制代码
    效果：

image.png

还可以绘制多个：

```js
// 也可以设置颜色不设置还是红色
ctx.fillStyle = "green";
ctx.fillRect(30, 30, 100, 100)
ctx.fillRect(60, 60, 100, 100)
```
复制代码

效果：

image.png

  • 渐变填充：需要借助 createRadialGradient() 去实现一个渐变，后边讲到这个 api 再去实现。

font

​ font 用于设置要绘制的字体样式同 CSS 的 font 用法基本类似。

ctx.font = '30px SimSun'
ctx.fillText('大家好我是王大锤', 20, 50)
复制代码

效果：

image.png

属性值： font 属性使用的语法与 CSS font 属性相同。

globalCompositeOperation

属性设置要在绘制新形状时应用的合成操作的类型，其中type是用于标识要使用的合成或混合模式操作的字符串。

ctx.globalCompositeOperation = type;
复制代码

类型：

类型描述
source-over 默认设置，直接在现有图形上绘制，直接覆盖。
source-in 在和原Canvas图重叠位置绘制，不然为透明，类似遮罩，新内容为显示层，原内容是遮罩层不会显示。
source-out 和 source-in 相反，重叠位置为透明，在不重叠或者半透明位置绘制新图。
source-atop 新图在与原图重叠的位置绘制。
destination-over 在现有的画布内容后面绘制新图。也就是说原图把新图覆盖。
destination-in 显示新图和原图重叠的部分。
destination-out 显示新图和原图不重叠部分。
destination-atop 显示重叠部分且新的图形是绘制在原图后边。
lighter 重叠部分的颜色是通过色值相加得来的。
copy 只显示新图型
xor 重叠区域不显示，只显示不重叠的区域
multiply 将顶层像素和底层对应的像素相乘。
screen 像素被倒转，相乘，再倒转。
overlay multiply和screen的结合，原本暗的地方更暗，原本亮的地方更亮。
darken 保留两个图层中最暗的像素。
lighten 保留两个图层中最亮的像素。
color-dodge 将底层除以顶层的反置。计算公式：最终的颜色值是：底色+（底色*顶色）/（255-顶色）。仅供参考。
color-burn 将反置的底层除以顶层，然后将结果反过来。
hard-light 屏幕相乘类似于叠加和overlay，但上下图层互换了。
soft-light 用顶层减去底层或者相反来得到一个正值。
difference 一个柔和版本的强光（hard-light）。纯黑或纯白不会导致纯黑或纯白。
exclusion 和difference相似，但对比度较低。
hue 保留了底层的亮度和色度，同时采用了顶层的色调。
saturation 保留底层的亮度和色调，同时采用顶层的色度。
color 保留了底层的亮度，同时采用了顶层的色调和色度。
luminosity 保持底层的色调和色度，同时采用顶层的亮度。

示例：

 // 渲染图片
 var img = new Image(); 
 img.src="./xg.jpg";
 // 注意这里要在图片加载完之后才能去操作否则图片不显示
 img.onload =function() {
    const canvas = document.getElementById('tutorial')
    if (!canvas.getContext) return
    let ctx = canvas.getContext('2d');
    // 设置类型 可以自己一个一个试试上边表格所写类型，不过常用到的也就几个
    ctx.globalCompositeOperation = "multiply";
    // 绘制图片 api 
    // 也可也采用 html 标签的方式引入 img 设置 ID 去获取 DOM
    // var image = document.getElementById('你的id')
    ctx.drawImage(img, 33, 71, 104, 124, 21, 20, 87, 104);
     
    ctx.fillStyle = "green";
    ctx.fillRect(10, 10, 100, 100);

    ctx.fillStyle = "red";
    ctx.fillRect(50, 50, 100, 100);
    ctx.font = 'bold 24px SimHei, STHeiti'
    ctx.fillText('大锤‘, 50, 50)
 }
复制代码

效果：

image.png

lineWidth

设置线段宽度

// 描述线段宽度必须为数字， 0、负数、infinity 和 NaN 会被忽略。
ctx.lineWidth = value
复制代码

lineCap

指定如何绘制每一条线段末端的属性。有3个可能的值，分别是：butt, round and square。默认值是 butt。

示例：

var lineCap = ['butt','round','square'];
ctx.strokeStyle = 'black';
for (var i = 0; i < lineCap.length; i++) {
    // 设置线段的宽度
    ctx.lineWidth = 15;
    ctx.lineCap = lineCap[i];
    // 清空子路径列表开始一个新路径的方法。 当你想创建一个新的路径时，调用此方法。
    ctx.beginPath();
    // 将一个新的子路径的起始点移动到(x，y)坐标的方法。
    ctx.moveTo(25+i*50,10);
    // 使用直线连接子路径的终点到x，y坐标的方法（并不会真正地绘制）
    ctx.lineTo(25+i*50,140);
    // 对路径进行描边。
    ctx.stroke();
}
复制代码

效果：

image.png

  • butt：默认值常规绘制。
  • round：线的端点多出一个圆弧或者说半圆。
  • square: 线的端点多出一个长方形，宽是lineWidth 高是其一半。

lineDashOffset

用来设置虚线的偏移量

ctx.lineDashOffset = value
// value 便宜量是 float 精度的数字，初始值0.0.
复制代码

示例：

const canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
// 在填充线时使用虚线模式。 它使用一组值来指定描述模式的线和间隙的交替长度。
// 如果要切换回至实线模式，将 dash list 设置为一个空数组即可。
ctx.setLineDash([4, 16]);
ctx.lineDashOffset = 2;

ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(400, 100);
ctx.stroke();
复制代码

效果： image.png

lineJoin

lineJoin 表示线条转角的样式：miter round bevel 三种类型，miter 是默认值。

// miter: 默认值 转角是尖头，如果折线角度比较小，则尖头会非常长，需要 miterLimit 进行限制。
// round: 转角是圆头。
// bevel: 转角是平头。
ctx.lineJoin = 'miter'
复制代码

示例：

ctx.lineWidth = 10;
ctx.lineJoin = "miter";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(150, 100);
ctx.lineTo(200,15);
ctx.lineTo(200,100);
ctx.stroke();
// 上边没讲到的 api 咱们已经用到好几次了就不一一注释了
复制代码

效果：

image.png

miterLimit

用来限制出现尖角长度范围，如果超出，则平角显示；不超出，则依然尖角。

// value: 表示多大范围内转角表现为 miter 的宽度。数值类型，默认值10.0  
// 0、负数、infinity 和 NaN 会被忽略。
ctx.miterLimit = value
复制代码

shadowBlur

用来设置阴影的模糊程度，默认值为 0。

// value: 表示阴影的模糊程度，数值类型，可以是小数
ctx.shadowBlur = value
复制代码

shadowColor

用来设置阴影的色值shadowColor是必须要指定的。

示例：

ctx.shadowColor = "red";
ctx.shadowBlur = 10;
ctx.fillStyle = "#000";
ctx.fillRect(10, 10, 100, 100);
复制代码

效果：

image.png

shadowOffsetX

设置阴影水平偏移量，默认值是 0。

shadowOffsetY

设置阴影垂直偏移量，默认值是 0。

示例：

ctx.shadowColor = "red";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 10
ctx.shadowOffsetY = 10
ctx.fillStyle = "#000";
ctx.fillRect(10, 10, 100, 100);
复制代码

效果： image.png

strokeStyle

设置描边的样式，文字、边框、形状都可以。

/**
color: 设置颜色值和 fillStyle 取值一样
gradient: 设置渐变
pattern: 设置为图案
*/
ctx.strokeStyle = color
复制代码

示例：

// 渐变
// 创建一个渐变对象 createLinearGradient 方法需要指定四个参数，分别表示渐变线段的开始和结束点
// 起点的X轴坐标，起点的Y轴坐标，终点的X轴坐标，起点的Y轴坐标
let gradient = ctx.createLinearGradient(0, 0, 0, 120);
// addColorStop()添加一个由偏移值和颜色值指定的断点到渐变
gradient.addColorStop(0, '#ccc');
gradient.addColorStop(1, 'red');
ctx.lineWidth = 10;
ctx.strokeStyle  = gradient;
ctx.strokeRect(10, 10, 100, 100);
// 图案
let image = new Image();
image.src = './xg.jpg';
// 注意要 image 加载完毕后再进行绘制。
image.onload = function () {
    var pattern = ctx.createPattern(this, 'repeat');
    ctx.strokeStyle = pattern;
    ctx.lineWidth = 10;
    ctx.strokeRect(40, 20, 160, 80);
};
复制代码

效果：

image.png

textAlign

设置文本的对其方式。

/**
默认值：start 文本对齐界线开始的地方
*/
ctx.textAlign = "left" || "right" || "center" || "start" || "end";
复制代码

textBaseline

设置文本对其的基线

/**
默认值：alphabetic 文本基线是标准的字母基线。
*/
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
复制代码

下篇会总结一下 canvas 的方法篇

点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

posted @ 2021-10-21 09:32  威武的大萝卜  阅读(148)  评论(0)  编辑  收藏  举报