为什么我的星星没有填充色呢-慕课网

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

为什么我的星星没有填充色呢

来源：4-1 画一片星空

qq_囚鸟不知海_2

2016-08-25 16:14

<!DOCTYPE html>

<html>

<head>

</head>

<style>

#canvas{display: block; border: 1px solid black; margin: 60px auto;}

</style>

<body>

</canvas>

window.onload = function(){

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

canvas.width = 800;

canvas.height = 800;

context.fillRect(0,0,canvas.width,canvas.height)

//一个画布中开始子路径的一个新的集合

drawStar(context,150,300,400,400,30);

}

//cxt:绘制环境 r：小圆半径 R：大圆半径 x，y：图像的位置 rot:旋转的角度

function drawStar(cxt,r,R,x,y,rot){

cxt.beginPath();

for (var i=0 ; i<5 ; i++) {

//大圆

cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI )*R + x ,

-Math.sin((18+i*72-rot)/180*Math.PI )*R + y)

//小圆

cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI )*r + x ,

-Math.sin((54+i*72-rot)/180*Math.PI )*r + y)

}

//一个画布中结束子路径的一个新的集合

cxt.closePath();

cxt.fillStyle = "#fb3";

cxt.strokeStyle = "#fd5";

cxt.lineWidth = 3;

cxt.lineJoin = 'round';

//画弧

cxt.stroke();

}

</script>

</body>

</html>

写回答关注

2回答

杜新明

2016-08-26 17:13:49

//画弧
cxt.stroke();
在这之前添加cxt.fill();

0 0
321文123

2016-08-25 22:45:41

因为你没有写 cxt.fill()

0 1

Canvas绘图详解

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

72881 学习 · 422 问题

查看课程

相似问题

为什么没有星星

回答 2

有个星星没颜色？

回答 1

为什么我的for循环一个星星都没有？

回答 3

为什么我的星星都在一坨？

回答 1

为什么不出星星

回答 1

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