<!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>
存在问题：
当画笔宽度设置大，书写会有明显的锯齿。。。目前还没有处理。