文档章节

Html5 Canvas画线有毛边解决方法

山哥
 山哥
发布于 2011/06/02 13:13
字数 428
阅读 9590
收藏 4

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>

本文转载自:

山哥

山哥

粉丝 247
博文 355
码字总数 136865
作品 0
南京
程序员
私信 提问
HTML5开发手机App之:HTML5系统教程-何韬-专题视频课程

HTML5开发手机App之:HTML5系统教程—23518人已学习 课程介绍 通过案例进行详尽的讲解,浓缩HTML5开发APP之前端基础语法,掌握HTML5的开发方法,为进一步的深入学习打下基础。 课程收益 使零...

pkutao
2016/02/04
0
0
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
0
0
HTML5视频教程之canvas合成海报所遇问题及解决方案

本篇文章扣丁学堂HTML5培训小编大家分享HTML5开发方面的问题:canvas合成海报所遇问题及解决方案,HTML5不论是现在还是今后的发展相信很多人都是很看好的,下面和小编一起来了解一下HTML5开发...

扣丁学堂
2018/08/29
0
0
10 在线工具用来简化 HTML5 编码

HTML5 肯定是会彻底改变我们创建的网站和Web应用程序。在这篇文章中,编制了10个非常强大的工具,以简化和增强你的HTML5的编码。 Initializr Initializr会为你生成一个干净的可定制的模板,基...

红薯
2011/08/16
3.1K
3
Web 开发中的矢量绘图处理和应用

矢量绘图一直是 Web 开发中一直比较薄弱的环节。本文首先针对不同浏览器详细阐述不同的矢量绘图解决方案,其中包括 HTML5 Canvas、SVG 以及 VML 等技术;之后针对每种不同的技术介绍其实现和...

IBMdW
2011/09/03
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

WPS 开启宏功能

前言 最近安装了个人版的WPS2019,使用Excel的宏功能时候发现不能使用了,网上下载了几个安装包都是比较旧的,不能使用。 找了个VB7.1的安装包,安装完了,重启WPS宏功能就可以使用了。 安装...

sharelocked
31分钟前
0
0
ZStack实践汇 | 高效开发测试打造产品化私有云

作者:许佳珺 前言 随着越来越多的企业将云计算产品应用到基础设施及其核心业务中,如何提高和保证软件交付质量、减少软件开发迭代周期、加速软件发布频率成为所有云厂商面临的关键问题。 根...

ZStack社区版
38分钟前
3
0
IPv4如何转换为IPv6?

导读 ipv6已经逐渐在应用,现在已经有很多的运营商支持ipv6,前天我们也发布了如何让电脑使用ipv6地址?有很多朋友在问?ipv6有什么作用,它的表示方式是什么,今天我们来一起来详细了解下ipv...

问题终结者
今天
4
0
SpringBoot2.0高级案例(05):整合 Swagger2 ,构建接口管理界面

一、Swagger2简介 1、Swagger2优点 整合到Spring Boot中,构建强大RESTful API文档。省去接口文档管理工作,修改代码,自动更新,Swagger2也提供了强大的页面测试功能来调试RESTful API。 2、...

知了一笑
今天
6
0
关于观察者模式总结

观察者模式(发布订阅模式):在对象之间定义一对多的依赖,这样一来,当一个对象改变状态,依赖他的对象都会收到通知,并自动更新。 使用场景:当一个对象状态改变同时需要改变其他对象,且...

cherryboy
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部