<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>
文章出自：http://qh.itpxw.cn/peixun/software/202190820.html
文章标题：Java在线学习：如何用HTML5画布画一个五星红旗
免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉
(责任编辑：深圳学历教育网)
IT培训网 访问该机构站点 报名留言 加为好友 用户等级:注册会员
用户级别:10
机构名称:IT培训网
联 系 人:罗老师
联系电话:13783581536
联系手机:13783581536
在线客服:
在 线 QQ:
电子邮件:
网站域名:http://www.itpxw.cn
注册时间:2016-07-18 11:07
最后登录:2024-02-20 13:02
