canvas 爬坑路【属性篇】

网友投稿 908 2022-11-25

canvas 爬坑路【属性篇】

canvas 爬坑路【属性篇】

简介

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

浏览器 IE8 及以下不支持 ​​​​ 标签元素。

创建 canvas 元素

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

通过 JavaScript 来获取 canvas 元素

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

canvas 相关属性及其用法

getContext()

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

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

fillStyle

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

普通填充:

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

效果:

还可以绘制多个:

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

效果:

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

font

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

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

效果:

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

效果:

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

效果:

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

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

效果:

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

效果:

shadowOffsetX

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

shadowOffsetY

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

示例:

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

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

效果:

textAlign

设置文本的对其方式。

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

textBaseline

设置文本对其的基线

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

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

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

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:散列函数
下一篇:如果优雅地在Vue页面中引入img图片
相关文章

 发表评论

暂时没有评论,来抢沙发吧~