請問各位,為什么我的就是畫不出來??檢查了好幾遍了沒發(fā)現(xiàn)錯誤?。?/h1>
<!doctype html>
<html>
<head>
? ?<meta charset="utf-8" />
? ?<title>canvas五角星</title>
? ?<script>
? ? ? ?window.onload = function () {
? ? ? ? ? ?let canvas = document.getElementById('canvas');
? ? ? ? ? ?let context = canvas.getContext('2d');
? ? ? ? ? ?draw(context, 150, 300, 400, 400);
? ? ? ?}
? ? ? ?function draw(context, r, R, x, y) {
? ? ? ? ? ?context.beginPath();
? ? ? ? ? ?for (let i = 0; i < 5; i++) {
? ? ? ? ? ? ? ?context.lineTo((Math.cos((18 + i * 72) / 180 * Math.PI)) * R + x, -(Math.sin((18 + i * 72) / 180 * Math.PI)) * R + y);
? ? ? ? ? ? ? ?context.lineTo((Math.cos((54 + i * 72) / 180 * Math.PI)) * r + x, -(Math.sin((54 + i * 72) / 180 * Math.PI)) * r + y);
? ? ? ? ? ?}
? ? ? ? ? ?context.lineWidth = 10;
? ? ? ? ? ?context.closePath();
? ? ? ? ? ?context.strokeStyle = 'red';
? ? ? ? ? ?context.fillStyle = '#123333';
? ? ? ? ? ?context.stroke();
? ? ? ?}
? ?</script>
</head>
<body style="height:100%">
? ?<canvas id="canvas" style="height:800px;width:800px;display:block;margin:20px auto;border:1px solid #666">抱歉,您的瀏覽器不支持canvas,請更換其他瀏覽器!</canvas>
? ?
</body>
</html>
<!doctype html>
<html>
<head>
? ?<meta charset="utf-8" />
? ?<title>canvas五角星</title>
? ?<script>
? ? ? ?window.onload = function () {
? ? ? ? ? ?let canvas = document.getElementById('canvas');
? ? ? ? ? ?let context = canvas.getContext('2d');
? ? ? ? ? ?draw(context, 150, 300, 400, 400);
? ? ? ?}
? ? ? ?function draw(context, r, R, x, y) {
? ? ? ? ? ?context.beginPath();
? ? ? ? ? ?for (let i = 0; i < 5; i++) {
? ? ? ? ? ? ? ?context.lineTo((Math.cos((18 + i * 72) / 180 * Math.PI)) * R + x, -(Math.sin((18 + i * 72) / 180 * Math.PI)) * R + y);
? ? ? ? ? ? ? ?context.lineTo((Math.cos((54 + i * 72) / 180 * Math.PI)) * r + x, -(Math.sin((54 + i * 72) / 180 * Math.PI)) * r + y);
? ? ? ? ? ?}
? ? ? ? ? ?context.lineWidth = 10;
? ? ? ? ? ?context.closePath();
? ? ? ? ? ?context.strokeStyle = 'red';
? ? ? ? ? ?context.fillStyle = '#123333';
? ? ? ? ? ?context.stroke();
? ? ? ?}
? ?</script>
</head>
<body style="height:100%">
? ?<canvas id="canvas" style="height:800px;width:800px;display:block;margin:20px auto;border:1px solid #666">抱歉,您的瀏覽器不支持canvas,請更換其他瀏覽器!</canvas>
? ?
</body>
</html>
2018-08-23
canvas的長寬不能加px