pixi.js 解决绘制弧线锯齿问题

项目中需要实现一条线条的滑动效果,发现弧线滑动时锯齿太严重。在PixiJS有自带的抗锯齿的参数,但是在使用时感觉效果并不是很好。参照http://pixijs.download/release/docs/PIXI.Application.html

html

  <canvas width="300" height="300">canvas>

js

    var c = document.getElementsByTagName('canvas')[0]
    var width = c.width
    var height = c.height
    var devicePixelRatio = 1
    if (window.devicePixelRatio) {
      devicePixelRatio = window.devicePixelRatio
      c.style.width = width + 'px'
      c.style.height = height + 'px'
      c.width = width * window.devicePixelRatio
      c.height = height * window.devicePixelRatio
    }
    var app = new PIXI.Application({width: width * devicePixelRatio, height: height * devicePixelRatio, transparent : true,resolution: 1, view: c})
    document.body.appendChild(app.view)
	var circle = new PIXI.Graphics()
	
	circle.beginFill(0xFFFF0B, 0.5)
	circle.drawCircle(150, 150, 60)	//绘制圆
	circle.endFill()
	circle.scale = {
	  x: devicePixelRatio,
	  y: devicePixelRatio
	}
	app.stage.addChild(circle)

你可能感兴趣的:(Web)