使用Pixi.js消除绘图中的弧线锯齿问题
最编程
2024-02-22 20:15:23
...
项目中需要实现一条线条的滑动效果,发现弧线滑动时锯齿太严重。在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)