PIXI 写一个字及图片保存(2)

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>pixi</title>
  <script src="../js/pixi.min.js"></script>
</head>
<body>

<script type="text/javascript">
  //Create a Pixi Application
  let app = new PIXI.Application({ 526, height: 526,antialias:true});
  document.body.appendChild(app.view);
  // 设置背景颜色
  app.renderer.backgroundColor = 0xcccccc;

  // 更改画布大小
  // app.renderer.autoResize =true;
  //  app.renderer.resize(256,256)
  // app.renderer.width / app.renderer.height

  // 创建画笔
  let graphics = new PIXI.Graphics();

  // 填充颜色及画一个矩形区域
  graphics.beginFill(0xcccccc);
  graphics.drawRect(0,0,app.renderer.width,app.renderer.height);
   graphics.lineStyle(14, 0xffd900); //边框色

// 初始坐标 var lastPoint= {x:0, y:0}; // 是否按下去 var isMouse =false; // graphics.buttonMode = true; // 交互行为 graphics.interactive = true; app.stage.addChild(graphics); // 绑定事件 graphics.on('mousedown' ,onmousedown); graphics.on('mouseup' ,onmouseup); graphics.on('mousemove' ,onmousemove); graphics.on('mouseout' ,onmouseoutFun); function onmousedown(event){ console.log(event) this.data = event.data; var initPosition = this.data.getLocalPosition(this.parent); //获取鼠标移动的位置 console.log(initPosition.x +"-----"+initPosition.y); // 更新坐标点 lastPoint = initPosition; isMouse = true; } function onmouseup(){ isMouse = false; this.data = null; } function onmouseoutFun(){ if(isMouse == true){ isMouse = false; this.data = null; console.log('移除') } } function onmousemove(event){ if(isMouse == true){ var newPosition = this.data.getLocalPosition(this.parent); //获取鼠标移动的位置 // console.log(newPosition) // 绘画线条 graphics.moveTo(lastPoint.x,lastPoint.y); graphics.lineTo(newPosition.x, newPosition.y); graphics.endFill(); // 更新坐标点 lastPoint = newPosition; } } // 保存图片 function downloadImg(){ const image = app.renderer.plugins.extract.image(graphics); document.body.appendChild(image); } </script> <a href="../img/1.png" download="test">aaa</a> </body> </html>

存在问题:

当画笔宽度设置大,书写会有明显的锯齿。。。目前还没有处理。  

原文地址:https://www.cnblogs.com/congxueda/p/9299003.html