未加星标

canvas-坐标系、圆角矩形、纹理、剪裁

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

画布大小 :由canvas标签上设置的width,height决定,默认是 300 x 150,这也是画布坐标系x轴和y轴的最大值,超过这两个值,则意味着超过了画布大小,超过的部分自然不会生效。

canvas标签大小 :由css样式的width,height决定,默认是画布的大小。

特殊情况: 画布大小和canvas标签大小不相等的时候,画布会被缩放到跟标签大小一样。 缩放不是等比例的,并且缩放完成后,画布的坐标系不变 。因此最好把canvas标签的css大小和canvas画布大小设置为一致。

默认画布(300 * 150)

<canvas id="canvas1" style={{ width: '100px', height: '100px' }}></canvas> 复制代码 ctx.moveTo(0, 0); ctx.lineTo(300, 150); ctx.stroke(); 复制代码
canvas-坐标系、圆角矩形、纹理、剪裁

可以看到从(0,0)到(300, 150)这条线是从左上角到右下角的,可见画布被不等比例缩放到跟标签一样大,同时坐标系还是画布的大小:300 * 150。

当画布较小,而canvas标签比较大的时候,图形就会被放大,变形变模糊:

<canvas id="canvas2" width={10} height={20} style={{ width: '100px', height: '100px' }}></canvas> 复制代码 ctx.moveTo(0, 0); ctx.lineTo(10, 20); ctx.stroke(); 复制代码
canvas-坐标系、圆角矩形、纹理、剪裁

在2倍屏和3倍屏上,可把画布大小设置成标签大小的2倍和3倍,这样可以实现1px细线的效果,同时使线条更细腻

<canvas id="canvas3" width={200} height={200} style={{ width: '100px', height: '100px' }}></canvas> 复制代码 ctx.moveTo(0, 0); ctx.lineTo(200, 200); ctx.stroke(); 复制代码
canvas-坐标系、圆角矩形、纹理、剪裁
圆角矩形

要实现圆角矩形,先来了解一下画圆的api。

arc(x, y, r, sAngle, eAngle, counterclockwise) 参数 描述 x 圆的中心的 x 坐标。 y 圆的中心的 y 坐标。 x 圆的半径。 sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。 eAngle 结束角,以弧度计。 counterclockwise 可选。规定应该逆时针还是顺时针绘图,默认值false。false = 顺时针,true = 逆时针。
canvas-坐标系、圆角矩形、纹理、剪裁

画圆

<canvas id="canvas11" width={100} height={100}></canvas> 复制代码 ctx.arc(50, 50, 20, 0, 2 * Math.PI); 复制代码
canvas-坐标系、圆角矩形、纹理、剪裁

圆弧

<canvas id="canvas10" width={100} height={100}></canvas> 复制代码 ctx.arc(20, 20, 20, Math.PI, 1.5 * Math.PI); // 左上角 ctx.arc(80, 20, 20, 1.5 * Math.PI, 2 * Math.PI); // 右上角 ctx.arc(20, 80, 20, 0.5 * Math.PI, Math.PI); // 左下角 ctx.arc(80, 80, 20, 0, 0.5 * Math.PI); // 右下角 复制代码
canvas-坐标系、圆角矩形、纹理、剪裁
有了这四段圆弧,再利用 closePath

方法会连接路径的特点,即可画出圆角矩形了。来封装一个画圆角矩形的函数:

const drawRoundedRect = (ctx, x, y, width, height, radius, type) => { ctx.moveTo(x, y + radius); ctx.beginPath(); ctx.arc(x + radius, y + radius, radius, Math.PI, 1.5 * Math.PI); ctx.arc(x + width - radius, y + radius, radius, 1.5 * Math.PI, 2 * Math.PI); ctx.arc(x + width - radius, y + height - radius, radius, 0, 0.5 * Math.PI); ctx.arc(x + radius, y + height - radius, radius, 0.5 * Math.PI, Math.PI); ctx.closePath(); const method = type || 'stroke'; // 默认描边,传入fill即可填充矩形 ctx[method](); }; drawRoundedRect(ctx, 20, 20, 50, 50, 10); 复制代码
canvas-坐标系、圆角矩形、纹理、剪裁
纹理 createPattern(img, "repeat|repeat-x|repeat-y|no-repeat") 参数 描述 img 规定要使用的图片、画布或视频元素。 repeat 默认。该模式在水平和垂直方向重复。 repeat-x 该模式只在水平方向重复。 repeat-y 该模式只在垂直方向重复。 no-repeat 该模式只显示一次(不重复)。

原图


canvas-坐标系、圆角矩形、纹理、剪裁

尝试如下代码:

<canvas id="canvas13" width={400} height={300}></canvas> 复制代码 const img = new Image(); img.onload = () => { console.log('catImg', img.width, img.height); const pat = ctx.createPattern(img, 'no-repeat'); ctx.fillStyle = pat; drawRoundedRect(ctx, 130, 30, 250, 260, 10, 'fill'); }; img.src = catImgSrc; 复制代码
canvas-坐标系、圆角矩形、纹理、剪裁

从结果里发现两个问题:

图片的左上角和矩形的左上角不在同一点上; 矩形貌似少了右边和下边的部分。

接下来尝试修改代码里的 no-repeat 为 repeat :


canvas-坐标系、圆角矩形、纹理、剪裁

结合这两个结果和上面的问题,总结出纹理的如下特点:

no-repeat

这意味着我们不能自由的使用纹理来实现圆角图片的效果。 接下来了解一下canvas提供的专门用于图片剪裁的api。

剪裁

剪裁分为画布的剪裁 clip 和图片的剪裁 drawImage ,先来介绍一下图片的剪裁。

drawImage(img, sx, sy, swidth, sheight, x, y, width, height) 参数 描述 img 规定要使用的图像、画布或视频。 sx 可选。开始剪切的 x 坐标位置。 sy 可选。开始剪切的 y 坐标位置。 swidth 可选。被剪切图像的宽度。 sheight 可选。被剪切图像的高度。 x 在画布上放置图像的 x 坐标位置。 y 在画布上放置图像的 y 坐标位置。 width 可选。要使用的图像的宽度。(伸展或缩小图像) height 可选。要使用的图像的高度。(伸展或缩小图像)

drawImage可接受3、5、9个参数。 接下来介绍一下分别传这几个参数的表现,先看原图:

大小:1080 * 720


canvas-坐标系、圆角矩形、纹理、剪裁
三个参数

会被当做:img、x、y。图片不会缩放和剪裁,直接渲染到画布上,超过画布的区域被隐藏,也可理解成超过画布的区域被剪掉了。

const img = new Image(); img.onload = () => { console.log('img:', img.width, img.height); ctx.drawImage(img, 10, 20); }; img.src = imgSrc; 复制代码
canvas-坐标系、圆角矩形、纹理、剪裁
九个参数

按照上面表格的定义进行剪裁和缩放。

const img = new Image(); img.onload = () => { ctx.drawImage(img, 0, 0, 500, 500, 30, 30, 150, 150); }; img.src = imgSrc; 复制代码
canvas-坐标系、圆角矩形、纹理、剪裁
五个参数

img、x、y、width、height,此时图片不会被剪裁,而是直接缩放到目标宽高,且是不等比例的。

const img = new Image(); img.onload = () => { ctx.drawImage(img, 0, 0, 150, 150); }; img.src = imgSrc; 复制代码
canvas-坐标系、圆角矩形、纹理、剪裁

接下来传入9个参数,剪裁图片的宽高等于图片的宽高,来验证和5个参数是一样的效果:

const img = new Image(); img.onload = () => { ctx.drawImage(img, 0, 0, 1080, 720, 0, 0, 150, 150); }; img.src = imgSrc; 复制代码
canvas-坐标系、圆角矩形、纹理、剪裁

另外,从原图上剪裁的时候,不要超过图片的宽高,否则会出现空白。

drawImage这个api能实现把图片剪裁成直角矩形,却不能实现圆角的效果。而上面的纹理方法,能实现圆角图片,但效果不是十分理想,毕竟它是用来做纹理的,而不是图片剪裁。接下来再了解一个api: clip

,通过它配合drawImage,能实现把图片剪裁成圆角矩形、圆形、甚至任意形状。

clip()

clip() 方法就是把画布中的某个区域临时剪切出来,剪切之前要定义这个区域的路径。剪切以后,所有的绘制只有落在这个区域里才会生效,在这个区域外的不会生效。之所以说“临时”,是因为如果在剪切之前调用了 save() 方法,则画布状态会被保存下来,之后调用 restore() 方法即可恢复之前的状态,即 clip 的那个区域的限制不再继续生效,而之前落在区域外的绘制也不会因为 restore 而被绘制出来。 尝试如下代码:

<canvas id="canvas15" width={150} height={150}></canvas> 复制代码 // 定义一个区域 drawRoundedRect(ctx, 20, 20, 100, 100, 10); const img = new Image(); img.onload = () => { ctx.save(); ctx.clip(); ctx.drawImage(img, 0, 0, 100, 100); }; img.src = imgSrc; 复制代码

效果:


canvas-坐标系、圆角矩形、纹理、剪裁

看到这个效果很兴奋,接下来只要把图片的目标区域先从画布上剪切下来,再调用drawImage去绘制图片,则图片就会变成想要的形状。至于原始图片,则可以通过 drawImage 先剪裁一个想要的区域,再进行绘制。

从原图上剪裁出一部分,再绘制成两个圆角的图片:

<canvas id="canvas16" width={300} height={200}></canvas> 复制代码 const img = new Image(); img.onload = () => { ctx.save(); ctx.strokeStyle = '#fff'; drawRoundedRect(ctx, 20, 20, 100, 100, 10); ctx.clip(); ctx.drawImage(img, 500, 100, 500, 500, 20, 20, 100, 100); ctx.restore(); ctx.strokeStyle = '#fff'; drawRoundedRect(ctx, 150, 20, 100, 100, 5); ctx.clip(); ctx.drawImage(img, 500, 100, 500, 500, 150, 20, 100, 100); }; img.src = imgSrc; 复制代码

效果:


canvas-坐标系、圆角矩形、纹理、剪裁
接下来封装一个能实现圆角功能的 drawImage

:

const drawRoundedImage = (ctx, radius, img, sx, sy, swidth, sheight, x, y, width, height) => { ctx.save(); ctx.moveTo(x, y + radius); ctx.beginPath(); if (width === height && radius >= width / 2) { ctx.arc(x + radius, y + radius, radius, 0, 2 * Math.PI); } else { ctx.arc(x + radius, y + radius, radius, Math.PI, 1.5 * Math.PI); ctx.arc(x + width - radius, y + radius, radius, 1.5 * Math.PI, 2 * Math.PI); ctx.arc(x + width - radius, y + height - radius, radius, 0, 0.5 * Math.PI); ctx.arc(x + radius, y + height - radius, radius, 0.5 * Math.PI, Math.PI); } ctx.closePath(); ctx.clip(); ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height); ctx.restore(); }; const img = new Image(); img.onload = () => { drawRoundedImage(ctx, 10, img, (1080 - 720) / 2, 0, 720, 720, 10, 10, 180, 180); }; img.src = imgSrc; 复制代码

效果:


canvas-坐标系、圆角矩形、纹理、剪裁

如果把上面的绘制路径部分提出来当成参数传入,则可实现用户自定义图形然后将图片剪裁成该形状的功能:

const drawImageToWhatYouWant = (ctx, getPath, img, sx, sy, swidth, sheight, x, y, width, height) => { ctx.save(); getPath(ctx); // 自定义图形的路径 ctx.clip(); ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height); ctx.restore(); }; 复制代码 保存图片 toDataURL([type, encoderOptions]) 参数 描述 type 图片格式,默认为image/png encoderOptions 在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。

调用: const imgStr = canvas.toDataURL("image/jpeg", 1.0); 复制代码 注意:当画布中包含图片时,此图片必须是允许跨域的,否则调用toDataURL 会报错!

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:canvas-坐标系、圆角矩形、纹理、剪裁
本站链接:https://www.codesec.net/view/620952.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(31)