app开发者平台在数字化时代的重要性与发展趋势解析
908
2022-11-25
canvas 爬坑路【属性篇】
简介
浏览器 IE8 及以下不支持
创建 canvas 元素
// 设置其 ID 待会通过 JavaScript 来获取 canvas 元素,width 和 height 根据自己需求去写就好。
通过 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 的正方形了。// 错他是不会出现的,因为文章开篇就说到了 `
效果:
还可以绘制多个:
```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小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~