我们知道,清空canvas画布内容有以下两个方法。 第一种方法是cearRect函数:
context.cearRect(0,0,canvas.width,canvas.height)
第二种方法就是用原值重新设置一下canvas的宽(或者高)
canvas.width = canvas.width
// or
canvas.height = canvas.height
第二种方法可以起作用,是因为canvas的一个特点:
每当画布的高度或宽度被重设时,画布内容就会被清空。相关内容可以参考https://www.w3school.com.cn/html5/att_canvas_width.asp
在一个可视化项目中,我们发现在一些电脑上面总是会出现效果错乱的情况。 经过调试,我们发现,原来是“canvas.width = canvas.width”惹的祸。普通屏幕下面下不会有问题,但是如果屏幕是高清屏,就会出现问题。这是因为,高清屏下,我们为了处理绘制图形模糊的问题,通常会做如下处理:
functionsetupCanvas(canvas) {
let width = canvas.width,
height = canvas.height,
dpr = window.devicePixelRatio || 1.0;
if (dpr != 1.0 ) {
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.height = height * dpr;
canvas.width = width * dpr;
ctx.scale(dpr, dpr);
}
}
我们知道,高清屏下window.devicePixelRatio都大于1。所以在绘图之前画笔会被缩放:
ctx.scale(dpr, dpr);
我们知道cavnas是基于状态的绘图组件。 其中缩放比例值也在状态管理之中。 当我们重新设置canvas的宽(高也一样)的时候,不仅会清空canvas的画布内容,同时还会把绘图状态重置到最原始的状态,原始状态下画笔的缩放比例是1,缩放比例值会被重置为1,因而导致绘制效果错乱。
如果读者不清楚“高清屏下canvas处理绘制图形模糊及处理方式”和“canvas的绘制状态”等知识点不清楚,建议学习相关知识,也推荐有兴趣读者,订阅我的专栏: Canvas高级进阶 https://xiaozhuanlan.com/canvas,相关知识会在 本文也是摘录自专栏的部分内容并改编而成的。
相关推荐
我们知道,清空canvas画布内容有以下两个方法。 第一种方法是cearRect函数: context.cearRect(0,0,canvas.width,canvas.height) 第二种方法就是用原值重新设置一下canvas的宽(或者高) canvas.width = canvas....
4.4_屏幕坐标和canvas坐标的转换|使用鼠标和canvas交互|canvas项目综合实战|Canvas图形、动画、游戏开发
利用canvas实现图片缩放可以发散扩展为游戏背景图片
3.8_使用离屏Canvas制作放大镜效果|离屏Canvas图像处理|Canvas图形、动画、游戏开发从入门到精通全系列课程
canvas全屏特效.zip
首先可以确定,这两个问题都是canvas元素边界有问题,但是从代码上来看是没问题的,因此我就猜测是否和屏幕有关,毕竟canvas某些问题确实和屏幕有关甚至和硬件显卡有关。 devicePixelRatio属性 果然找出一个属性...
酷炫的html5 canvas全屏背景动画特效
3.7_canvas和鼠标交互|离屏Canvas图像处理|Canvas图形、动画、游戏开发从入门到精通全系列课程
全屏背景动画的实现是由canvas完成
Vue前端技术结合ECharts及Canvas技术开发出的数据大屏、指挥舱,包含党建,政务,财务三个维度
HTML5 canvas支持触摸屏的签名涂鸦插件
高清屏出现以前,屏幕的一个物理像素就是css所定义的一个逻辑像素(估计那个时候还没有物理像素和逻辑像素的概念)。因此使用下面代码就可以在浏览器中展示一个600×386的Canvas。 <html> <head> <...
Canvas鼠标经过碎片高亮变化特效是一款酷炫的全屏星星闪烁星空动态背景动画特效。
修改html2canvas.js源码,可以解决截图不全问题.使用方式参考 http://blog.csdn.net/q2365921/article/details/54377479
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf
基于html5 canvas绘制的全屏酷炫星光闪烁3D视差背景动画特效,还有鼠标交互效果哦。
解决htmlcanvas手机无法截图或者截图不全的问题,解决后在手机或者pc上截图效果非常的好。主要解决img对象转换为base64的问题
canvas
解决在ie下的canvas兼容显示问题,特别是需哟兼容低版本的时候
canvas裁剪canvas裁剪canvas裁剪canvas裁剪canvas裁剪canvas裁剪