當(dāng)linewidth=10的時(shí)候我得到了一個(gè)缺角的三角形,誰能幫我修改下代碼讓我得到一個(gè)完整的三角形
<!DOCTYPE html>
<html>
<head>
? <meta charset="UTF-8">
? <title>Canvas 特效</title>
</head>
<body>
? <canvas id="canvas" style="border:1px solid #aaa; display:block; margin:50px auto;" >?
? ?當(dāng)前瀏覽器不支持Canvas,請更換瀏覽器后再試
? </canvas>
? <script>
? ? ?window.onload = function(){
? ? ?
? ? ? ? ? ?var canvas = document.getElementById("canvas");
? ? ? ? ? ?
? ? ? ? ? ? ? ?canvas.width = 800;
? ? ? ? ? ? ? ?canvas.height = 800; ? ??
? ? ?
? ? ? ? ? ?var context = canvas.getContext("2d");
? ? ? ? ? ?context.moveTo(100,100);
? ? ? ? ? ?context.lineTo(700,700);
? ? ? ? ? ?context.lineTo(100,700);
? ? ? ? ? ?context.lineTo(100,100);
? ? ? ? ? ?context.lineWidth = 10;
? ? ? ? ? ?context.strokeStyle = "red";
? ? ? ? ? ?context.stroke();
? ? ?}
? </script>
</body>
</html>
2014-12-02
接著往后看,要使用closePath
2014-12-04
最后一個(gè)context.lineTo(100,100); 可以改為 context.closePath();也可以在其后面加上 context.closePath();