毛边效果 html,Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A%E9%97%AE%E9%A2%98/
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按这样的坐标进行线条渲染时所要用到的就是夹缝两边的象素点,这样即便设置了lineWidth为1也将看到两个象素效果的线条,解决方法原象素点+0.5进行偏移。
下面是处理前后的效果比较:
canvasTest
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.οnlοad=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偏移
}
↓ 处理的 ↓ 普通的 ↓ +0.5偏移的
毛边效果 html,Html5 Canvas画线有毛边解决方法相关推荐
- 毛边效果 html,详解Html5 Canvas画线有毛边解决方法
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
- Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
- 毛边效果 html,Html5中Canvas画线有毛边如何解决
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
- html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码 复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
- html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
- canvas画圆又毛边
canvas画圆又毛边 canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang=&q ...
- html5 canvas画粗线时座标指定注意事项
画粗线时,座标不能定位在画布边界上,就是0或者width或者height.这是因为canvas画线粗线时是以你给定座标值为中心向两侧绘制,如果把座标定位到画布边界上,那么画出来的线就只有你给定粗细值的 ...
- 实现js动态创建img并使用canvas画线连接
实现js动态创建img,使用canvas画线连接img,当背景图更换时,重新绘制img及连接线. 前台页面 @{ Layout = null; } <!DOCTYPE html> ...
- 原罪学者 无限连接服务器,黑暗之魂2原罪学者 召唤或连线失败的解决方法分享...
黑暗之魂2原罪学者 召唤或连线失败的解决方法分享 今天为大家带来的是黑暗之魂2原罪学者召唤或连线失败的解决方法分享,一起来看看吧! 自从前几天更新之后无法召唤与被召唤让本人非常苦恼,因为我很喜欢跟别人 ...
最新文章
- 虚拟机linux 8.04汉化,在虚拟机中快速安装 Ubuntu 18.04
- 幼儿园带括号算式口诀_整理41组“数学顺口溜”+大九九乘法口诀表!给孩子们收藏...
- 并联系统的失效率公式推导_电容的串并联计算方法
- NoSQL之Redis非关系数据库(redis概述,持久化,RDB持久化,AOF持久,内存碎片)
- java 10000阶乘_Java ForkJoinPool: 3秒计算100万的阶乘
- Hive中的一种假NULL
- Java生鲜电商平台-生鲜供应链(采购管理)
- java关键字与标识符 —(3)
- 安装Frida抓包工具
- java 输出字符集合里的字_Java基础 -- 字符串(格式化输出、正则表达式)(示例代码)...
- SpringBoot异步任务, 以及带返回值的异步任务(@Async 不起作用的原因)
- java怎么录入4位会员号_[Java源码]键盘输入会员卡号,对其格式、位数进行判断,不符合规则会跳转重新输入 | 学步园...
- 卷积神经网络VGG16这么简单,为什么没人能说清?
- python编程-Python 编程速成(推荐)
- Warning: 'https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/' already解决
- 《锋利的jQuery》笔记 第2章 jQuery选择器
- vue 前端使用 element-ui 实现省市级联动
- 浏览器UserAgent的趣味史
- 沉没的王国---揭秘滇东自杞国(5)
- (转)如何动手打造属于自己的智能家居