cesiya23
2015-11-05 22:12
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);
}
是因为基本的星星半径太小了,设大点就会出现星星的形状了
Canvas绘图详解
72881 学习 · 422 问题
相似问题
回答 3
回答 1