HTML5里canvas的操作

发布网友发布时间：2022-04-30 19:28

共2个回答

热心网友时间：2022-04-12 21:55

说下思路在给个简单的代码. 首先先画好线. 要平移实际上是将线重新画一次不是直接一个translate就好了的.再次你要理解save和restore()方法 code
<canvas id="canvas" width="700" height="550" style="border:1px solid #d3d3d3;"></canvas>

<script>
var canvas=document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function lines(ctx){
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(30,50);
ctx.lineTo(50,70);
ctx.lineTo(120,190);
ctx.stroke();
}
lines(ctx);

document.getElementById("canvas").addEventListener("click",function(){
ctx.save();
ctx.clearRect(0,0,700,550);
ctx.translate(50,50);
lines(ctx);
ctx.restore();

},false)
</script>

热心网友时间：2022-04-12 23:13

将代码贴出来啊是不是你只是做了context.translate() 操作没别的了啊它只是将对象位置平移，如果没后续操作的话肯定是没有变化的你把代码贴出来看看