详解Html5 Canvas画线有毛边解决方法


Posted in HTML / CSS onMarch 01, 2018

Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按这样的坐标进行线条渲染时所要用到的就是夹缝两边的象素点,这样即便设置了lineWidth为1也将看到两个象素效果的线条,解决方法原象素点+0.5进行偏移。

下面是处理前后的效果比较:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>canvasTest</title>  
    <script type="text/javascript" src="http://www.pyzy.net/Demo/html5_cancas_js/excanvas.js"></script>  
    <script type="text/javascript">  
        var MyCanvas = function(boxObj, width, height) {  
            //序号、计数  
            this.index = arguments.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1;  
            var cvs = document.createElement("canvas");  
            cvs.id = "myCanvas" + this.index;  
            cvs.width = width || 800;  
            cvs.height = height || 600;  
            (boxObj || document.body).appendChild(cvs);  
            //excanvas框架中针对ie加载canvas延时问题手动初始化对象  
            if (typeof G_vmlCanvasManager != "undefined") G_vmlCanvasManager.initElement(cvs);  
            //2D画布对象  
            this.ctx = cvs.getContext("2d");  
            /* * 绘制线条  
            * @ops JSON对象,可按实际支持属性扩展,示例:  { lineWidth:1,strokeStyle:'rgb(255,255,255)' }        
            * @dotXY:{ x:0, y:0 } ||[{ x:0, y:0 },{ x:0, y:0 }]  
            */  
            this.drawLine = function(dotXY, ops) {  
                this.ctx.beginPath();   
                for (var att in ops) this.ctx[att] = ops[att];  
                dotXY = dotXY.constructor == Object ? [dotXY || { x: 0, y: 0}] : dotXY;  
                this.ctx.moveTo(dotXY[0].x, dotXY[0].y);  
                for (var i = 1, len = dotXY.length; i < len; i++) this.ctx.lineTo(dotXY[i].x, dotXY[i].y);  
                this.ctx.stroke();  
            };  
        };  
        window.onload=function(){  
            var c1 = new MyCanvas();  
            c1.drawLine([{ x: 10, y: 10 }, { x: 10, y: 200 }],{lineWidth:2,strokeStyle:'rgb(0,0,0)'});  
            c1.drawLine([{ x: 11, y: 10 }, { x: 11, y: 200 }],{lineWidth:2,strokeStyle:'rgb(255,255,255)'});  
            c1.drawLine([{ x: 100, y: 10 }, { x: 100, y: 200 }],{lineWidth:1,strokeStyle:'rgb(0,0,0)'}); //普通线  
            c1.drawLine([{ x: 200.5, y: 10 }, { x: 200.5, y: 200 }],{lineWidth:1,strokeStyle:'rgb(0,0,0)'}); //+0.5偏移  
   
        }  
     
    </script>  
</head>  
<body>  
↓ 处理的↓ 普通的
↓ +0.5偏移的<br />  
</body>  
</html>

详解Html5 Canvas画线有毛边解决方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 #HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 #HTML / CSS
html5 分层屏幕适配的方法
Mar 16 #HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 #HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 #HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 #HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 #HTML / CSS
You might like
PHP的面向对象编程
2006/10/09 PHP
个人站长制做网页常用的php代码
2007/03/03 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
python IDLE添加行号显示教程
2020/04/25 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
毕业实习评语
2014/02/10 职场文书
霸王洗发水广告词
2014/03/14 职场文书
老龄工作先进事迹
2014/08/15 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
英语教师求职信范文
2015/03/20 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python