canvas实现线性动画的时候带锯齿的问题

最新推荐文章于 2024-07-29 10:42:08 发布

心如江水

最新推荐文章于 2024-07-29 10:42:08 发布

阅读量1.7k

点赞数

分类专栏： web前端文章标签：移动开发 canvas 前端开发

本文链接：https://blog.csdn.net/weixin_43088706/article/details/90641809

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

canvas实现线性动画的时候带锯齿的问题

解决方法一

1、就是在canvas标签中设置了width=“200”,height="200"之外, 还在外部的CSS样式表中设置了该canvas的宽度为100%.
2、然后在画图时把canvas的的宽度设为手机端的最大像素值, 因为现在的手机端宽度的最大的只有1080像素宽, 所以就把canvas的宽度和高度设为200的6倍也就是1200像素, 按照这个像素画完之后, width:100%。
3、又会把canvas的宽度和高度缩小至父元素的宽和宽那么大, 因此整个canvas被缩小了, 大尺寸的canvas内容被缩小了之后肯定不会产生锯齿现象，解决的原理其实就是画图时候将canvas的宽和高放大一定的倍数。
4、按照放大后的canvas宽和高画图，然后画完之后再将canvas缩小为目标宽和高，这样解决的方法存在的问题是。
在PC端反而锯齿会更明白，只是移动端的效果很好，所以在pc端不需要放大倍数

	<!DOCTYPE html>
	<html lang="zh-cn">
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	    <title>html5 canvas 画图移动端出现锯齿毛边的解决方法</title>
	    <style type="text/css">
	        #canvas{
	            width: 100%;
	        }
	    </style>
	</head>
	<body style="background: url(blue_bj.jpg);">
	 <div style="width: 200px">
	    <canvas id="canvas" width="200" height="200" ></canvas>
	 </div>
	</body>
	</html>
	<script type="text/javascript">
	// 判断是移动还是pc
	function IsPC() {
	    var userAgentInfo = navigator.userAgent,
	        Agents = ["Android", "iPhone",
	                "SymbianOS", "Windows Phone",
	                "iPad", "iPod"],
	        flag = true;
	    for (var v = 0; v < Agents.length; v++) {
	        if (userAgentInfo.indexOf(Agents[v]) > 0) {
	            flag = false;
	            break;
	        }
	    }
	    return flag;
	}
	//PC端和移动端方法倍数的判断
	var scale = 1;
	if( !IsPC() ){
	   scale = 6;
	}
	var canvas=document.getElementById("canvas");
	var cxt=canvas.getContext("2d");
	//画一个空心圆
	cxt.beginPath();
	canvas.width = canvas.width*scale;
	canvas.height = canvas.height*scale;
	cxt.arc(canvas.width/2,canvas.height/2,canvas.width/2-scale*16,0,360,false);
	cxt.lineWidth = scale*16;
	cxt.strokeStyle = "#faff6d";
	cxt.stroke();
	cxt.closePath();
	</script>

方法二

1、使用window.devicePixelRatio设备上物理像素和设备独立像素(device-independent pixels (dips))的比例来设置canvas实际需要放大的倍数，原理与上一种方法一样，
2、区别在于　devicePixelRatio取出的是实际的比例倍数，在pc端显示为1，避免了上种方法PC端不判断同样放大一样倍数画图出现明显锯齿问题，但是devicePixelRatio各个浏览器的兼容性不是很好，这是唯一缺陷，

	<!DOCTYPE html>
	<html lang="zh-cn">
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	    <title>html5 canvas 画图移动端出现锯齿毛边的解决方法</title>
	</head>
	<body style="background: url(blue_bj.jpg);">
	    <canvas id="canvas" width="200" height="200" ></canvas>
	</body>
	</html>
	<script type="text/javascript">
	    var canvas=document.getElementById("canvas");
	    var cxt=canvas.getContext("2d");
	    //画一个空心圆
	     cxt.beginPath();
	     var width = canvas.width,
	         height=canvas.height;
	    if (window.devicePixelRatio) {
	        canvas.style.width = width + "px";
	        canvas.style.height = height + "px";
	        canvas.height = height * window.devicePixelRatio;
	        canvas.width = width * window.devicePixelRatio;
	        cxt.arc(canvas.width/2,canvas.height/2,canvas.width/2-16 * window.devicePixelRatio,0,360,false);
	        cxt.lineWidth=16 * window.devicePixelRatio;
	        cxt.strokeStyle="#faff6d";
	        cxt.stroke();//画空心圆
	        cxt.closePath();
	        cxt.scale(window.devicePixelRatio, window.devicePixelRatio);
	    }
	</script>