为什么我只画出来三个点呢。。

来源:4-2 图像变换和状态保存

cesiya23

2015-11-05 22:12

http://img.mukewang.com/563b63d3000167e205150438.jpg

window.onload = function() {

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

// canvas.height = window.innerHeight;

// canvas.width = window.innerWidth;

canvas.height = 800;

canvas.width = 800;

if(canvas.getContext("2d")) {

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

} else {

alert("当前浏览器不支持canvas,请更换浏览器后再试");

}


// drawRect(context,0,0,canvas.width,canvas.height,0,"black","black")


// context.save();

context.strokeStyle = "green";

context.fillStyle = "red";

context.translate(100,100);

drawStar(context);

context.translate(100,100);

drawStar(context);

context.translate(100,100);

drawStar(context);

// context.restore();


// context.lineWidth = 5;

// context.strokeStyle = "#fd5";

// context.fillStyle = "#fb3";

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

// var x = Math.random()*(canvas.width);//*Math.pow(-1,Math.ceil(Math.random()*1000))   正负1

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

// var rot = Math.random()*360;

// context.save();

// context.translate(x,y);

// context.rotate(rot);

// drawStar(context);

// context.restore();

// }

}


function starPath(cxt) {

cxt.beginPath();

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

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

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

}

cxt.closePath();

}


function drawStar(cxt) {

starPath(cxt);

cxt.fill();

cxt.stroke();

}


function drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillColor) {

cxt.lineWidth = borderWidth;

cxt.strokeStyle = borderColor;

cxt.fillStyle = fillColor;

cxt.fillRect(x,y,width,height);

cxt.strokeRect(x,y,width,height);

}


写回答 关注

1回答

  • 霞_霞
    2015-12-15 11:13:40

    是因为基本的星星半径太小了,设大点就会出现星星的形状了

    霞_霞

    或者在绘制路径前,通过设置context.scale(3,3);放大

    2015-12-15 11:21:32

    共 1 条回复 >

Canvas绘图详解

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

72881 学习 · 422 问题

查看课程

相似问题