绘制线性渐变图形 var lg = content.createLinearGr

老师，我有重点bug，怎么解决这个问题ctx.globalCompositeOperation='xor'啊？ <div class="snippet-clipbo

Canvas学习笔记之二 about html-css-note HOT 2 CLOSED

cy0707 commented on July 3, 2024

Canvas学习笔记之二

from html-css-note.

Comments (2)

snowcrazy commented on July 3, 2024

老师，我有重点bug，怎么解决这个问题ctx.globalCompositeOperation='xor'啊？


<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.globalCompositeOperation="xor";  // 这个重点bug

ctx.fillStyle="red";
ctx.beginPath();
ctx.moveTo(100,60);
ctx.lineTo(160,120);
ctx.lineTo(100,180);
ctx.lineTo(40,120);
ctx.closePath();
ctx.fill();


ctx.fillStyle="bule";
ctx.beginPath();
ctx.lineTo(160,120);
ctx.lineTo(100,180);
ctx.lineTo(40,120);
ctx.closePath();
ctx.fill();


</script>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.globalCompositeOperation="xor";

ctx.fillStyle="red";
ctx.beginPath();
ctx.moveTo(100,60);
ctx.lineTo(160,120);
ctx.lineTo(100,180);
ctx.lineTo(40,120);
ctx.closePath();
ctx.fill();


ctx.fillStyle="bule";
ctx.beginPath();
ctx.lineTo(160,120);
ctx.lineTo(100,180);
ctx.lineTo(40,120);
ctx.closePath();
ctx.fill();


</script>

</body>
</html>