【热点话题】

java在线学习：如何用HTML5画布画一个五星红旗

发布：达内
来源：达内
时间：2015-09-15 14:20

<html>
<head>
<title>五星红旗</title>
<meta charset="utf-8"/>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');//定义画布 2d视图
//绘制红色的画布
ctx.fillStyle = '#f00';//画布的颜色
ctx.fillRect(0,0,450,300);//0，0：开始点，450:宽 300：高

//绘制大五角星
ctx.save();
ctx.translate(40,65);/*起始位置*/
ctx.scale(0.22,0.22);/*刻度大小*/
drawStar(ctx); /*调用js函数画五角星*/
ctx.restore();

//绘制四个小五角星
ctx.save();
ctx.translate(160,15);/*定义第一个五角星位置*/
ctx.rotate(0.1*Math.PI);/*设置旋转的角度*/
ctx.scale(0.06,0.06);/*刻度大小*/
drawStar(ctx); /*调用js函数画五角星*/
ctx.restore();

ctx.save();
ctx.translate(190,45);
ctx.rotate(0.1*Math.PI);
ctx.scale(0.06,0.06);
drawStar(ctx);
ctx.restore();

ctx.save();
ctx.translate(190,90);
ctx.rotate(0.1*Math.PI);
ctx.scale(0.06,0.06);
drawStar(ctx);
ctx.restore();

ctx.save();
ctx.translate(160,130);
ctx.rotate(0.1*Math.PI);
ctx.scale(0.06,0.06);
drawStar(ctx);
ctx.restore();
}
//绘制五角星函数
function drawStar(ctx){

ctx.beginPath() //开始绘制
ctx.fillStyle="yellow";//定义颜色
ctx.moveTo(0,0); //第1个点位置
ctx.lineTo(345,0); //2
ctx.lineTo(67,202); //3
ctx.lineTo(172,-126); //4
ctx.lineTo(280,202); //5
ctx.closePath(); //绘制完成
ctx.fill(); /*填充*/

}
</script>
</head>
<body>
<canvas id="canvas" width="800" height="300"></canvas>
</body>
< /html>

【免责声明】本文部分系转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，如涉及作品内容、版权和其它问题，请在30日内与我们联系，我们会予以重改或删除相关文章，以保证您的权益！

上一篇： JSP中九种内置对象的用法总结

下一篇：用java模拟光的单缝衍射和牛顿环