详解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动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
Aug 18 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 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 mail to 配置详解
2014/01/16 PHP
php调整服务器时间的方法
2015/04/03 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
javascript的BOM汇总
2015/07/16 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python文件操作整理汇总
2014/10/21 Python
python图像处理之镜像实现方法
2015/05/30 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python实现的特征提取操作示例
2018/12/03 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
python3的pip路径在哪
2020/06/23 Python
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
入党积极分子思想汇报
2014/01/02 职场文书
销售顾问工作计划书
2014/08/15 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
学生自我评语
2015/01/04 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书