求大佬指點！！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible" content="IE=edge,chrome="1"/>
<title>畫布</title>
</head>
<body>
<canvas width="600" height="450" style="border:1px solid #09F;margin-left:10%; margin-top:10%; margin-bottom:10%" ></canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
context.beginPath();
context.strokeStyle="#red";
context.moveTo(10,10);
context.lineTo(200,150);
context.stroke();
context.closePath();
context.beginPath();
context.strokeStyle="red";
context.moveTo(10,20);
context.lineTo(200,160);
context.stroke();
context.closePath();
context.lineWidth='10px';
context.lineCap=square;
context.lineJoin=bevel;
context.fillStyle="blue";
context.fill();
</script>
</body>
<html>
uj5u.com熱心網友回復：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas width="600" id="canvas" height="450"
style="border:1px solid #09F;margin-left:10%; margin-top:10%; margin-bottom:10%"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle = "#red";
context.moveTo(10, 10);
context.lineTo(200, 150);
context.stroke();
context.closePath();
context.beginPath();
context.strokeStyle = "red";
context.moveTo(10, 20);
context.lineTo(200, 160);
context.stroke();
context.closePath();
context.lineWidth = '10px';
context.lineCap = 'square';
context.lineJoin = 'bevel';
context.fillStyle = "blue";
context.fill();
</script>
</html>
用心點
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/283954.html
標籤：HTML5