移动端canvas抗锯齿

未抗锯齿效果图：

加入抗锯齿代码效果：

var Game = function(){var H = document.documentElement.clientHeight || document.body.clientHeight;var W = document.documentElement.clientWidth || document.body.clientWidth;this.canvas = document.getElementById("canvas");this.context = this.canvas.getContext("2d");/*主要js*/if (window.devicePixelRatio) {this.canvas.style.width = W + "px";this.canvas.style.height = H + "px";this.canvas.width = W * window.devicePixelRatio;        //此处以倍数最佳this.canvas.height = H * window.devicePixelRatio;        //此处以倍数最佳this.context.scale(window.devicePixelRatio, window.devicePixelRatio);        //此处以倍数最佳}else{this.canvas.width = W;this.canvas.height = H;}

// 倍数代码示例

if (window.devicePixelRatio) {this.canvas.style.width = W + "px";this.canvas.style.height = H + "px";this.canvas.width = W * 2 * window.devicePixelRatio;this.canvas.height = H * 2 * window.devicePixelRatio;this.context.scale(window.devicePixelRatio*2, window.devicePixelRatio*2);}

//demo代码

<!DOCTYPE html>
<html><head><!--<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">--><meta content="width=750,user-scalable=no" name="viewport"><meta name="format-detection" content="telephone=no" /><meta charset="utf-8" /><script type="text/javascript" src="js/jquery-2.1.3.min.js" ></script><script type="text/javascript" src="js/public.js" ></script><link rel="stylesheet" href="css/style.css" /><title></title></head><body><section class="page"><canvas id="canvas"></canvas></section></body>
</html>
<script type="text/javascript">var Game = function(){var H = document.documentElement.clientHeight || document.body.clientHeight;var W = document.documentElement.clientWidth || document.body.clientWidth;this.canvas = document.getElementById("canvas");this.context = this.canvas.getContext("2d");if (window.devicePixelRatio) {this.canvas.style.width = W + "px";this.canvas.style.height = H + "px";this.canvas.width = W*2 * window.devicePixelRatio;this.canvas.height = H*2 * window.devicePixelRatio;this.context.scale(window.devicePixelRatio*2, window.devicePixelRatio*2);}else{this.canvas.width = W;this.canvas.height = H;}this.canvas.style.background = "url(img/indexbg.png) center bottom /cover";this.sc_scale = W/32;this.fps = 60;            //仅用于fps初始化this.lastFramTime = 0;    //仅用于fps更新this.bg = new Image();this.treeTop = [{x:375,y:323},        //主干
            {x:306,y:570},        //顺时针分叉一---左
            {x:251,y:473},        //顺时针分叉二---左
            {x:339,y:407},        //顺时针分叉三---左
            {x:395,y:358},        //顺时针分叉四---右
            {x:410,y:375},        //顺时针分叉五---右
            {x:457,y:401},        //顺时针分叉六---右
            {x:505,y:550},        //顺时针分叉七---右
            {x:340,y:574},        //分叉1-1---左
            {x:294,y:596},        //分叉1-2---左
            {x:348,y:486},        //分叉2-1---左
        ];this.treeSpot = [{moveToX:371,moveToY:741,cp1x:426,cp1y:574,cp2x:345,cp2y:435,endX:this.treeTop[0].x,endY:this.treeTop[0].y,cb1x:358,cb1y:453,cb2x:415,cb2y:511,end2X:403,end2Y:741},//主干
            {moveToX:391,moveToY:620,cp1x:357,cp1y:608,cp2x:335,cp2y:597,endX:this.treeTop[1].x,endY:this.treeTop[1].y,cb1x:322,cb1y:583,cb2x:337,cb2y:596,end2X:392,end2Y:614},//分叉1
            {moveToX:389,moveToY:573,cp1x:346,cp1y:553,cp2x:301,cp2y:523,endX:this.treeTop[2].x,endY:this.treeTop[2].y,cb1x:297,cb1y:516,cb2x:329,cb2y:536,end2X:390,end2Y:565},//分叉2
            {moveToX:379,moveToY:479,cp1x:371,cp1y:469,cp2x:354,cp2y:447,endX:this.treeTop[3].x,endY:this.treeTop[3].y,cb1x:352,cb1y:437,cb2x:368,cb2y:460,end2X:379,end2Y:471},//分叉3
            {moveToX:372,moveToY:402,cp1x:380,cp1y:393,cp2x:392,cp2y:370,endX:this.treeTop[4].x,endY:this.treeTop[4].y,cb1x:391,cb1y:377,cb2x:384,cb2y:388,end2X:373,end2Y:407},//分叉4
            {moveToX:387,moveToY:500,cp1x:409,cp1y:437,cp2x:405,cp2y:418,endX:this.treeTop[5].x,endY:this.treeTop[5].y,cb1x:407,cb1y:439,cb2x:403,cb2y:478,end2X:388,end2Y:506},//分叉5
            {moveToX:396,moveToY:553,cp1x:430,cp1y:494,cp2x:438,cp2y:457,endX:this.treeTop[6].x,endY:this.treeTop[6].y,cb1x:444,cb1y:467,cb2x:432,cb2y:507,end2X:397,end2Y:566},//分叉6
            {moveToX:399,moveToY:591,cp1x:445,cp1y:581,cp2x:453,cp2y:580,endX:this.treeTop[7].x,endY:this.treeTop[7].y,cb1x:463,cb1y:579,cb2x:452,cb2y:582,end2X:401,end2Y:597},//分叉7/*以下是小树枝*/{moveToX:362,moveToY:604,cp1x:351,cp1y:585,cp2x:349,cp2y:582,endX:this.treeTop[8].x,endY:this.treeTop[8].y,cb1x:351,cb1y:587,cb2x:348,cb2y:585,end2X:360,end2Y:604},//分叉7
            {moveToX:335,moveToY:596,cp1x:325,cp1y:596,cp2x:310,cp2y:596,endX:this.treeTop[9].x,endY:this.treeTop[9].y,cb1x:314,cb1y:599,cb2x:320,cb2y:597,end2X:340,end2Y:598},//分叉7
            {moveToX:365,moveToY:553,cp1x:355,cp1y:519,cp2x:358,cp2y:528,endX:this.treeTop[10].x,endY:this.treeTop[10].y,cb1x:351,cb1y:505,cb2x:352,cb2y:526,end2X:358,end2Y:553},//分叉7
        ];}Game.prototype = {getFps : function(now){var fps = 1 / (now - this.lastFramTime) * 1000;return fps;},draw : function(now){suchen.drawShu();},drawShu : function(){suchen.context.beginPath();suchen.context.strokeStyle = "transparent";suchen.context.lineWidth = 0.1;for(var i=0;i<this.treeSpot.length;i++){suchen.context.moveTo(this.treeSpot[i].moveToX,this.treeSpot[i].moveToY);suchen.context.bezierCurveTo(this.treeSpot[i].cp1x,this.treeSpot[i].cp1y,this.treeSpot[i].cp2x,this.treeSpot[i].cp2y,this.treeSpot[i].endX,this.treeSpot[i].endY);suchen.context.moveTo(this.treeSpot[i].endX,this.treeSpot[i].endY);suchen.context.bezierCurveTo(this.treeSpot[i].cb1x,this.treeSpot[i].cb1y,this.treeSpot[i].cb2x,this.treeSpot[i].cb2y,this.treeSpot[i].end2X,this.treeSpot[i].end2Y);suchen.context.lineTo(this.treeSpot[i].moveToX,this.treeSpot[i].moveToY);suchen.context.fillStyle = "#ad6330";suchen.context.fill();}suchen.context.stroke();suchen.context.closePath();},clearCanvas : function(now){suchen.context.clearRect(0,0,this.canvas.width,this.canvas.height);},animate : function(now){suchen.clearCanvas();suchen.getFps(now);suchen.draw(now);requestAnimationFrame(suchen.animate);},init : function(){this.bg.src = "img/me.png";this.bg.onload = function(){suchen.animate();}}}var suchen = new Game();suchen.init();window.ontouchmove = function(e){event.preventDefault();}
</script>

//以上基于移动端移动端移动端上锯齿效果，PC端有待自行测试~

转载于:https://www.cnblogs.com/sugege/p/7544618.html

移动端canvas抗锯齿相关推荐

PaintFlagsDrawFilter canvas 抗锯齿
Android 中抗锯齿两种方式出现锯齿场景: ① 当我们用Canvas绘制位图的时候,如果对位图进行了选择,则位图会出现锯齿. ② 在用View的RotateAnimation做动画时候,如果 ...
移动端canvas出现锯齿和文字模糊问题
最近在做一个转盘抽奖页面, 然后转盘是使用HTML5的canvas元素画出来的. 然而在几个手机上测试都发现转盘有一点锯齿问题, 而且文字都比较模糊. 除了在上面的canvas标签中设置了width= ...
延迟渲染G-buffer所占显存带宽计算（解决移动端和抗锯齿的若干疑问）
延迟渲染需要在前面阶段,将计算的内容保留在N张G-buffer中,但是网上的文章只是提及了G-buffer应该压缩,并且尽量少用,没有说明G-buffer所占带宽应该是多少,我将在下面介绍G-buff ...
各种抗锯齿效果的记录
抗锯齿介绍 SSAA :超级采样抗锯齿描述最早期的全屏抗锯齿,方法简单直接, 超级采样抗锯齿就是把当前分辨率成倍提高(如当前分辨率为1024×768,开启2倍的SSAA后,画面放大到2048×15 ...
如何消除图片锯齿 html,Html5 canvas drawImage图片抗锯齿
Html5 canvas drawImage图片抗锯齿2018-01-26 11:17 虽然drawImage会自动应用消除锯齿,但如果是从大尺寸变为小尺寸,某些图像就不尽人意了,比如曲线. 对于可能 ...
何恺明团队新作：图像分割精细度空前，边缘自带抗锯齿，算力仅需Mask R-CNN的2.6%...
鱼羊乾明发自凹非寺量子位报道 | 公众号 QbitAI 又是何恺明超越何恺明. 其团队最新论文一出,图像分割又往前一大步: 消耗的资源变得更少,算力仅需Mask R-CNN的2.6%. 不 ...
android 画布抗锯齿,android – 如何在画布和路径中进行抗锯齿处理
我遇到麻烦当我使用canvas.clipPath,它显示锯齿,它看起来不顺利,我知道如果我使用Paint,我可以使用mPaint.setFlags(Paint.ANTI_ALIAS_FLAG),这可以 ...
【摘录】Android画图之抗锯齿
在画图的时候,图片如果旋转或缩放之后,总是会出现那些华丽的锯齿.其实Android自带了解决方式. 方法一:给Paint加上抗锯齿标志.然后将Paint对象作为参数传给canvas的绘制方法. ...
基于形态学的图像后期抗锯齿算法--MLAA优化研究
本篇博文来自博主Imageshop,打赏或想要查阅更多内容可以移步至Imageshop. 转载自:https://www.cnblogs.com/Imageshop/p/9903045.html 侵 ...

移动端canvas抗锯齿

移动端canvas抗锯齿相关推荐

最新文章

热门文章