下面是利用canvas绘制一个简单的五角星的代码，跟大家分享一下，有条件或者感兴趣的朋友都可以的敲一下，代码内相关的数据大家可以根据需要自行更改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制五角星</title>
</head>
<body onload="draw('canvas')">
<script>
function draw(id){
var canvas=document.getElementById(id);//获取对象id
var context=canvas.getContext("2d");//设置画图类型为2d类型
context.width=500; //设置画布的宽度
context.height=500; //设置画布高度
context.fillStyle="#eeeeee"; //设置画布颜色
context.fillRect(0,0,500,500); //画一个矩形
context.translate(100,100); //星星的位置
createStar(context);
context.fill();
}
function createStar(context){
var dx=100;
var dy=0;
var s=50;
context.beginPath(); //设置绘图路径
context.fillStyle="rgba(255,0,0,0.5)";
var x=Math.sin(0);
var y=Math.cos(0);
var dig=Math.PI/5*4;
for(var i=0;i<5;i++){
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath(); //关闭绘图路径
}
</script>
<canvas id="canvas" width=500 height=500></canvas>
</body>
</html> |
|
收藏
淘帖
踩
