0
点赞
收藏
分享

微信扫一扫

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 是一个方法后续会讲先简单的使用一下
复制代码
  • 效果:

canvas 爬坑路【属性篇】_默认值

还可以绘制多个:

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

效果:

canvas 爬坑路【属性篇】_javascript_02

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

font

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

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

效果:

canvas 爬坑路【属性篇】_javascript_03

属性值: 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)
}
复制代码

效果:

canvas 爬坑路【属性篇】_2d_04

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();
}
复制代码

效果:

canvas 爬坑路【属性篇】_javascript_05

  • 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();
复制代码

效果: canvas 爬坑路【属性篇】_javascript_06

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 咱们已经用到好几次了就不一一注释了
复制代码

效果:

canvas 爬坑路【属性篇】_javascript_07

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);
复制代码

效果:

canvas 爬坑路【属性篇】_默认值_08

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);
复制代码

效果: canvas 爬坑路【属性篇】_默认值_09

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);
};
复制代码

效果:

canvas 爬坑路【属性篇】_javascript_10

textAlign

设置文本的对其方式。

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

textBaseline

设置文本对其的基线

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

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


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



举报

相关推荐

0 条评论