加入scale之后就绘制不出来了，求助
Nopa
2015-11-20 11:22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text</title>
<style>
#canvas{
display: block;;
margin: 50px auto;
border:1px solid #ccc;
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<canvas id="canvas">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
var context = canvas.getContext("2d");
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);
/*for(var i = 0;i < 200; i++){
var r = Math.random()*10 + 10;
var x = Math.random()*canvas.width;
var y = Math.random()*canvas.height;
var rot = Math.random()*360;
drawStar(context,r/2.0,r,x,y,rot)
}*/
drawStar(context,10,300,300,0);
function drawStar(cxt, R, x, y, rot){
cxt.save();
cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);
cxt.scale(R,R)
starPath(cxt);
//cxt.lineWidth = 2;
cxt.fillStyle = "#fb3";
//cxt.strokeStyle = "fb5";
//cxt.lineJoin = "round";
cxt.fill();
cxt.stroke();
cxt.restore();
}
function starPath(cxt){
cxt.beginPath();
for(var i = 0; i < 5;i++){
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI) ,
-Math.sin((18+i*72)/180*Math.PI));
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI) * 0.5,
-Math.sin((54+i*72)/180*Math.PI) * 0.5);
}
cxt.closePath();
}
</script>
</body>
</html>
2回答
-
- 霞_霞
- 2015-12-15 12:02:47
要么去掉cxt.stroke(); 要么加多一个cxt.strokeStyle = "#c00";因为默认边框的颜色是黑色，跟背景色一样了
-
- 前端小蜗牛_
- 2017-07-20 15:52:17
stroke不是描边吗？虽然这样设置了是可以的，但是fill才是填充啊？有冲突吗？
Canvas绘图详解
72990 学习 · 441 问题
相似问题