当前位置：首页 > news >正文

canvas练习画太阳花

news 2024/11/15 23:31:46

// file name: demo.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>练习</title><style>#myCanvas {box-shadow: 6px 9px 80px 13px rgba(0,0,0,.65);margin: 50px 400px;}</style></head><body><canvas id="myCanvas" width="500" height="500"></canvas></body><script src="js/demo.js"></script>
</html>

// file name: demo.jsvar myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");ctx.translate(250,250);
ctx.beginPath();
ctx.arc(0,0,20,0,Math.PI*2,false);
ctx.closePath();
ctx.strokeStyle = "red";
ctx.stroke();
var starAngle = 0;for(var i = 0;i < 12;i++){ctx.save();ctx.rotate(starAngle);starAngle += Math.PI/12;ctx.beginPath();ctx.moveTo(0,-100);ctx.quadraticCurveTo(-40,0,0,100);ctx.fillStyle = "green";ctx.fill();ctx.beginPath();ctx.moveTo(0,-100);ctx.quadraticCurveTo(40,0,0,100);ctx.fillStyle = "green";ctx.fill();ctx.restore();
}var starAngle = 0;
for(var i = 0;i < 12;i++){ctx.save();ctx.rotate(starAngle);starAngle += Math.PI/12;ctx.beginPath();ctx.moveTo(0,-100);ctx.quadraticCurveTo(-40,0,0,100);ctx.strokeStyle = "red";ctx.stroke();ctx.beginPath();ctx.moveTo(0,-100);ctx.quadraticCurveTo(40,0,0,100);ctx.strokeStyle = "red";ctx.stroke();ctx.restore();
}