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

类型：

示例：

// 渲染图片 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小时内删除侵权内容。