美国上市公司,专注Java培训22年

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


<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日内与我们联系,我们会予以重改或删除相关文章,以保证您的权益!

Java开发高端课程免费试学

大咖讲师+项目实战全面提升你的职场竞争力

  • 海量实战教程
  • 1V1答疑解惑
  • 行业动态分析
  • 大神学习路径图

相关推荐

更多
  • 达内java培训学员分享:论数学公式在编程中的应用
    达内java培训学员分享:论数学公式在编程中的应用
    本文转载达内java培训学员学习心得。 详情>>

    2015-10-13

  • 讲解2种查找素数的方法
    讲解2种查找素数的方法
    达内java培训学员讲解2种查找素数的方法 详情>>

    2015-10-13

  • 一个俄罗斯方块程序(非案例版)
    一个俄罗斯方块程序(非案例版)
    我们学面向对象的时候曾经做过俄罗斯方块这个案例,当时没有做完,我也不知道有《JAVA经典项目集锦》这个教材(做飞机大战的时候老师才告诉我们有这个书)。我当时想把它完成,可是自己又水平不够,不会JFrame,不会操纵图片,不会定时器,不会监听键盘,感觉难以下手。所以我在网上找了一个别人做的俄罗斯方块程序,把它小幅修改了一下,分享给大家。 详情>>

    2015-10-13

  • 用java模拟光的单缝衍射和牛顿环
    用java模拟光的单缝衍射和牛顿环
    使用java做出模拟光的单缝衍射和牛顿环的图案。 详情>>

    2015-09-21

  • Java开班时间

    收起