为什么星星固定在左上角了？-慕课网

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

为什么星星固定在左上角了？

来源：4-3 应用translate、rotate和scale

慕丝8476060

2018-11-30 16:59

<!DOCTYPE html>

<html>

<head>

margin: 0;

padding: 0;

}

body{

text-align: center;

}

</style>

</head>

<body>

<canvas id="canvas" >浏览器不支持的时候显示</canvas>

window.onload = function() {

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

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

canvas.width = 800;

canvas.height = 800;

context.fillStyle = '#000';

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

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

var r = Math.random()*10+10; // 10~20

var x = Math.random()*canvas.width;

var y = Math.random()*canvas.height;

var a = Math.random()*360;

drawStart(context,r/2.0,r,x,y,a);

}

function drawStart(cxt,x,y,R,rot) {

// 绘制出在(x,y),大小为R,旋转角度为rot的五角星

// 位移 translate(x, y)

// 旋转 rotate(deg);

// 缩放 scale(sx,sy)

cxt.save();

cxt.translate(x, y);

cxt.rotate(rot/180*Math.PI);

startPath(cxt);

cxt.fillStyle = '#fb3';

cxt.strokeStyle = '#fd5';

cxt.lineWidth = 3;

cxt.lineJoin = 'round';

cxt.fill();

cxt.stroke();

cxt.restore();

}

// 标准五角星的路径

function startPath(cxt) {

cxt.beginPath();

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

cxt.lineTo(Math.cos((18+i*72)/180*Math.PI)*20,

-Math.sin((18+i*72)/180*Math.PI)*20);

cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5*20,

-Math.sin((54+i*72)/180*Math.PI)*0.5*20);

}

cxt.closePath();

}

</script>

</body>

</html>

写回答关注

1回答

啊B

2019-05-06 15:47:59
你函数参数值没对应起来具体就是以下两行代码
```
drawStart(context,r/2.0,r,x,y,a);
function drawStart(cxt,x,y,R,rot) {
```
没有一一对应啊，你把r/2.0当成x传给了 drawStart

不知道能不能理解
0 0

Canvas绘图详解

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

72881 学习 · 422 问题

查看课程

相似问题

还是关于为什么星星只有一个还定在左上角的问题

回答 1

为什么在进行图形变化的操作后，星星只固定在（0,0）处

回答 2

为什么没有星星

回答 2

为什么不出星星

回答 1

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

回答 1

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