javascript - canves如何做到抗锯齿?
PHP中文网
PHP中文网 2017-04-10 17:17:54
0
2
646

用 lineTo画出来的线有锯齿,怎么才能变得圆润一些?

window.onload = function() { drawXY.init(); for(var i = 0 ; i < arr.length ; i ++) { drawXY.start(arr[i]); } }; var arr = [ {"x" : 0 , "y" : 120.5}, {"x" : 10.5 , "y" : 108.5}, {"x" : 20.5 , "y" : 80.5}, {"x" : 30.5 , "y" : 78.5}, {"x" : 40.5 , "y" : 68.5}, {"x" : 50.5 , "y" : 58.5}, {"x" : 60.5 , "y" : 50.5}, {"x" : 70.5 , "y" : 48.5}, {"x" : 150.5 , "y" : 30.5}, {"x" : 160.5 , "y" : 20.5}, {"x" : 180.5 , "y" : 18.5}, {"x" : 230.5 , "y" : 17.5}, ]; var drawXY = { //canves对象 myCanves : null, //canves宽度 canvesWidth : null, //canves 2d对象 ctx : null, //初始化 init : function() { this.myCanves = document.getElementById("can"); this.ctx = can.getContext("2d"); this.ctx.globalCompositeOperation = "source-atop"; this.ctx.canvas.width = parseInt(window.innerWidth) - 80; this.canvesWidth = this.ctx.canvas.width; this.ctx.strokeStyle = "#f8b22f"; this.ctx.lineWidth = 1; this.ctx.beginPath(); this.ctx.moveTo(0,120); }, /** * 开始绘制 * @param {Object} obj */ start : function(obj) { var self = this; self.ctx.lineTo(obj.x,obj.y); self.ctx.lineJoin = "round"; // this.ctx.globalCompositeOperation = 'source-atop'; self.ctx.stroke(); }, };
PHP中文网
PHP中文网

认证0级讲师

全部回复 (2)
左手右手慢动作
ctx.lineJoin = 'round';
    Peter_Zhu

    context.globalCompositeOperation = 'source-atop' 加上这个试一试

      最新下载
      更多>
      网站特效
      网站源码
      网站素材
      前端模板
      关于我们 免责声明 Sitemap
      PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!