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

最新推荐文章于 2025-09-01 10:51:27 发布

原创最新推荐文章于 2025-09-01 10:51:27 发布 · 4.4k 阅读

0 ·

CC 4.0 BY-SA版权

Web 专栏收录该内容

29 篇文章

订阅专栏

本文探讨了在PixiJS项目中遇到的弧线滑动锯齿严重的问题。文章提到，虽然PixiJS提供了内置的抗锯齿选项，但在实际应用中效果不尽如人意。作者通过研究PixiJS的文档，分享了解决这个问题的方法和经验。

部署运行你感兴趣的模型镜像

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

html

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

    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)