为了账号安全,请及时绑定邮箱和手机立即绑定

请问各位,为什么我的就是画不出来??检查了好几遍了没发现错误啊!

<!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>


正在回答

3 回答

canvas的长宽不能加px


0 回复 有任何疑惑可以回复我~

canvas的宽高不能写在style里面,写在外面或者用js来控制。

 <canvas id="canvas" width="800" height="800" style="display:block;margin:20px auto;border:1px solid #666">抱歉,您的浏览器不支持canvas,请更换其他浏览器!</canvas>


或者canvas标签里面不指定宽高,在js里面写canvas.width=800;canvas.height=800;

   


0 回复 有任何疑惑可以回复我~

onload函数中加入canvas.width=800;canvas.height=800;

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

请问各位,为什么我的就是画不出来??检查了好几遍了没发现错误啊!

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信