![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Canvas
Canvas 相关的内容。
_XXHolic_
这个作者很懒,什么都没留下…
展开
-
Canvas 绘制 1 px 直线模糊(非高清屏)的问题
引子 在 Canvas 显示模糊问题 中解决了在高清显示屏上模糊的问题,最近碰到了绘制直线的情况,使用了同样的方案,一开始觉得影响不大,但时间长了,发现非高清屏幕上,直线模糊的感觉越来越明显,就去找了下资料,进行了处理。 Origin My GitHub 问题 这是问题重现页面。 在网上同样可以找同样的问题,从各种回答中,在 LET’S CALL IT A DRAW(ING SURFACE) 中找到较有说服力的解释: 把每一个像素想象为一个正方形。整数坐标(0,1,2…)是正方形的边。如果你在整数坐标原创 2020-08-24 09:31:07 · 344 阅读 · 0 评论 -
Canvas 图像灰度处理
引子 在玩游戏的时候,碰到一个交互效果:背景一张看起来黑白的图,然后用擦除的交互,让图像变的有颜色。也想试试做这个效果,首先想到的是那个黑白的图是怎么形成的,于是就查资料,找到了用 Canvas 转换的方法。 Origin My GitHub 思路 看起来是黑白的图像,其实是灰度图像,进一步说明见图像。这种图像的特点是像素的颜色分量取值都是一样的,而 Canvas 的方法 getImageData 可以获取到画布上的像素值数据,改变数据后,使用方法 putImageData 将数据绘制到画布上。这样就可原创 2020-08-17 11:40:43 · 300 阅读 · 0 评论 -
canvas 文本坐标(0,0)显示问题
引子 在测试 canvas 文字显示的时候,发现坐标设为(0,0),文字显示会有问题。 Origin My GitHub 文本坐标(0,0)显示问题 刚开始本以为使用 canvas 的方法不对,尝试改变坐标后,发现又可以显示。这是问题示例,扫描访问二维码如下。 查询资料,发现了类似的问题,原因是 canvas 中的文本坐标位置,是按照属性 textBaseline 设置的基线作为参考,默认值是 alphabetic。效果如下图。 当位置坐标为(0,0)时,文本基线以上的就不在 canvas 显示区域原创 2020-08-10 16:41:58 · 647 阅读 · 0 评论 -
canvas 图片跨域处理
引子 近期的工作中处理图片合并时,碰到图片来源跨域的情况,在此记录。 Origin My GitHub 图片跨域处理 在用 canvas 合成图片时,放在画布里面的图片,有些图片源是另外一个域名,由于同源策略,首先需要在服务配置中添加对应的 Access-Control-Allow-Origin,允许对应域名的请求。在这次处理过程中,还发现如果有用 CDN 进行加速,那么对应的 CDN 的配置也要添加这个请求头。 此外在合成图片的时候,要给对应的图片添加 crossOrigin 属性,否则会被认为污染了原创 2020-08-03 09:02:54 · 603 阅读 · 0 评论 -
canvas 文字换行
引子 近期的工作中,遇到的功能需求,需要控制文字显示行数,超过就省略号显示。 Origin My GitHub 文字换行 一般文字行数控制用 css 就可以实现,但在 canvas 中不行。在网站查询资料,就可以发现需要程序控制文字换行,主要使用到的方法是 measureText(),这个方法会返回一个度量文本的相关信息的对象,例如文本的宽度。 这里会有一个边界问题:如果文字在 canvas 边界出现换行,那么就可能出现文字显示不全的问题。 主要处理方法如下: // 文本换行处理,并返回实际文字所占据的原创 2020-07-20 08:55:42 · 530 阅读 · 0 评论 -
canvas 图片圆角问题
引子 近期的工作中,是继 canvas 设置边框问题 之后碰到的第 4 个问题。 Origin My GitHub 图片圆角问题 如果只是想要显示圆角的效果,设置 border-radius 就可以了,但如果要让 canvas 合成的图片显示为圆角,这种 css 方式不行。这是示例,扫描访问二维码如下。 在网上查询资料,发现同样的问题,解决的方式是用 canvas 的裁剪功能。 解决方法 先画布上画一个有圆角的矩形,然后使用裁剪的方式 clip()。 // 生成有圆角的矩形 function draw原创 2020-07-13 08:44:27 · 2490 阅读 · 0 评论 -
canvas 设置边框问题
引子 近期的工作中,是继 canvas 显示模糊问题 之后碰到的第 3 个问题。 Origin My GitHub 设置边框问题 这个是示例,扫描访问二维码如下。 在手机上可以看到,设置边框后,图片就模糊了。如果 border 不占用 canvas 的高宽度,就没有那个问题,在画布上画个边框也可以。 原因应该跟 canvas 显示模糊问题中差不多,但疑问的是这种情况并没有少像素,而是展示的空间少了,画布上的像素多了,为什么也会模糊?难道是像素挤到一起重叠了?查了下资料,是有像素重叠的情况。真正原因是什原创 2020-07-06 08:52:24 · 2082 阅读 · 0 评论 -
canvas 显示模糊问题
引子 近期的工作中,是继 canvas 宽高问题 之后碰到的第二个问题。 Origin My GitHub 显示模糊问题 在 PC 浏览器上显示时,没有发现明显的模糊,还可以接受。但在手机上就会有明显的模糊。这是示例,扫描访问二维码如下。 示例中,用 css 控制 canvas 的宽高,里面的图片展示效果不一致。查询资料,在 stackoverflow 中发现同样的问题,通过实际测试发现: canvas 元素自身的属性 width 和 height,决定了多少像素可以显示在画布上,如果不设置,wid原创 2020-07-03 09:31:12 · 3176 阅读 · 0 评论 -
Canvas 宽高问题
引子 在最近的工作中碰到了合成图片的需求,首先想到的便是 canvas,到网上查找了一些资料,大部分也是使用 canvas。因为好久没有实际接触过这方面的东西了,感觉到一些兴奋。预估会收获不少。 Origin My GitHub 宽高问题 因为是在手机上,需要进行不同尺寸的适配,在项目中使用的是 rem 单位,想着既然拥有全局属性 width 和 height,那么理论上应该支持。进行了下面的尝试。 html 标签属性设置 这是示例,扫描二维码访问如下。 发现这个想法不对,后来看规范中的描述,发现描述原创 2020-06-24 09:05:54 · 538 阅读 · 0 评论 -
Canvas 橡皮擦效果
引子 解决了第一个问题图像灰度处理之后,接着就是做擦除的效果。 Origin My GitHub 思路 一开始想到 Canvas 的画布可以相互覆盖的特性,彩色原图作为背景,灰度图渲染到 Canvas 画布上,然后手指滑动的时候,把接触的部分清除掉,就显示出了背景图。关键的部分是怎么清除画布上已有图像,查询资料发现有两种方式: 使用 clearRect 方法,会把指定范围所有像素变成透明,并...原创 2020-02-07 14:01:24 · 703 阅读 · 0 评论