请问各位，为什么我的就是画不出来？？检查了好几遍了没发现错误啊！-慕课网

首页课程实战体系课手记专栏慕课教程

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

来源：3-2 画一个五角星

慕粉4495554

2018-03-14 17:43

<!doctype html>

<html>

<head>

<title>canvas五角星</title>

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>

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

</body>

</html>

写回答关注

3回答

Elias丿纯黑

2018-08-23 21:42:42

canvas的长宽不能加px

0 0
子羊学长

2018-04-12 18:21:25

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 0
JackeyT

2018-03-15 17:35:50

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

0 0

Canvas绘图详解

Canvas系列教程第二课,详解Canvas各接口，让同学彻底掌握Canvas绘图

72881 学习 · 422 问题

查看课程

相似问题

为什么我五角星出不来？检查了好多遍了

回答 2

检查了代码，没发现什么问题。但是我画出来却是烟花，而不是星空

回答 1

好奇怪啊，试了好久还是没法画出来啊

回答 1

为什么我的五角星没有画出来，全黑了呢？

回答 3

为什么我画出来的不是弯月？仔细核对了代码，没找到问题，求指点

回答 3

打开慕课网App查看更多内容