`
128kj
  • 浏览: 601151 次
  • 来自: ...
社区版块
存档分类
最新评论

HTML5 canvas 飘扬的五星红旗

阅读更多
效果图:

效果链接:
http://www.108js.com/article/article3/zip4/31093/index1.html
代码:
<!doctype html>
<html>
<head>
  <meta charset="gbk">
  <link href="style/style.css" rel="stylesheet" type="text/css">
  <title></title>
</head>
<body>
   <canvas id="canvas" width="300" height="200"></canvas>
   <script>

/** 
  使用HTML5绘制标准五星红旗 
  */
  var canvas = document.getElementById("canvas");
   canvas.style.marginLeft =(canvas.width / 3) + 'px';
   canvas.style.marginTop =(canvas.height / 4) + 'px';
  drawFiveStarFlag(canvas);
  var timer = waveFlag(canvas, 30, 20, 100, 200, 0.2);
  function drawFiveStarFlag(canvas){
   var context = canvas.getContext('2d');
   var width=canvas.width;
   var height=width*2/3;
   context.fillStyle="red";
   context.fillRect(0,0,width,height);
   var maxR = 0.15, minR = 0.05;//
   var maxX = 0.25, maxY = 0.25;//大五星的位置
   var minX = [0.50, 0.60, 0.60, 0.50];
   var minY = [0.10, 0.20, 0.35, 0.45];
   // 画大☆
   var ox = height * maxX, oy = height * maxY;
   create5star(context,ox,oy,height * maxR,"#ff0",0);//绘制五角星
   // 画小★
   for (var idx = 0; idx < 4; idx++) {
    var  sx = minX[idx] * height, sy = minY[idx] * height;
    var  theta = Math.atan((oy - sy)/(ox - sx));
    create5star(context,sx, sy, height * minR, "#ff0",-Math.PI/2+theta);
   }
}
   //绘制五角星
   /**
   * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上
   * rotate:绕对称轴旋转rotate弧度
   */
  function create5star(context,sx,sy,radius,color,rotato){
    context.save();
    context.fillStyle=color;
    context.translate(sx,sy);//移动坐标原点
    context.rotate(Math.PI+rotato);//旋转
    context.beginPath();//创建路径
    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(x*radius,y*radius);
    }
    context.closePath();
    context.stroke();
    context.fill();
    context.restore();
  } 
  function waveFlag(canvas, wavelength, amplitude, period, shading, squeeze) {
    if (!squeeze) squeeze = 0;//挤压
    if (!shading) shading = 100;//阴影
    if (!period) period = 200;//周期
    if (!amplitude) amplitude = 10;//振幅
    if (!wavelength) wavelength = canvas.width / 10;
    var fps = 30;//每秒帧数
    var ctx = canvas.getContext('2d');
    var w = canvas.width,
        h = canvas.height;
    var od = ctx.getImageData(0, 0, w, h).data;//获取canvas的像素数据数组
    // var ct = 0, st=new Date;
    return setInterval(function() {
        var id = ctx.getImageData(0, 0, w, h);
        var d = id.data;
        var now = (new Date) / period;
        for (var y = 0; y < h; ++y) {
            var lastO = 0,
                shade = 0;
            var sq = (y - h / 2) * squeeze;
            for (var x = 0; x < w; ++x) {
                var px = (y * w + x) * 4;
                var pct = x / w;
                var o = Math.sin(x / wavelength - now) * amplitude * pct;
                var y2 = y + (o + sq * pct) < < 0;
                var opx = (y2 * w + x) * 4;
                shade = (o - lastO) * shading;
                d[px] = od[opx] + shade;
                d[px + 1] = od[opx + 1] + shade;
                d[px + 2] = od[opx + 2] + shade;
                d[px + 3] = od[opx + 3];
                lastO = o;
            }
        }
        ctx.putImageData(id, 0, 0);
        // if ((++ct)%100 == 0) console.log( 1000 * ct / (new Date - st));
    }, 1000 / fps);
}

</script>
</body>
</html>

个人学习网站:http://www.108js.com
  • 大小: 17.4 KB
0
0
分享到:
评论

相关推荐

    HTML5 Canvas绘制五星红旗.docx

    HTML5 Canvas 绘制五星红旗 HTML5 中的 Canvas 绘图 API 不在 `&lt;canvas&gt;` 元素本身上定义,而是定义在通过画布的 `getContext()` 方法获得的一个绘图环境对象上。Canvas API 也使用路径的表示法,但路径由一系列的...

    HTML5 Canvas核心技术源码技术代码

    HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...

    html5 canvas飘洒的星星特效

    html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...

    HTML 5 Canvas基础教程 源码+PDF

    《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...

    html5canvas播放视频

    HTML5 Canvas 是一个强大的网页图形绘制工具,允许开发者在网页上动态绘制图像,而无需依赖任何插件。在这个场景中,我们关注的是如何利用Canvas来播放视频。这涉及到HTML5的Media API和Canvas API的结合使用,使得...

    HTML5Canvas基础教程

    资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...

    HTML5 Canvas核心技术代码

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。Canvas API提供了大量的方法和属性,使得JavaScript可以直接控制像素级别的图像操作。这个压缩包...

    html5 canvas 图片压缩

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图像处理,包括绘制、修改和操作图像。在HTML5 Canvas中,我们可以通过JavaScript API实现图片的压缩功能,这对于优化网页性能,尤其是处理...

    HTML5 canvas仿屏保动态管道

    HTML5 canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript动态创建和修改二维图形,从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中,我们利用canvas元素来模仿经典的Windows屏保...

    《HTML5 Canvas 开发详解》第二版pdf

    《HTML5 Canvas 开发详解》第二版pdf 版

    html5 canvas 游戏

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式2D内容。这个“html5 canvas 游戏”是一个基于HTML5 Canvas技术开发的小游戏,主题是“兔子吃萝卜”,展示了...

    HTML5 CanvasAPI

    HTML5 Canvas API 是一项强大的技术,它允许在网页中直接绘制图形、图表、图像以及动画。与传统的图像加CSS的方法相比,Canvas API 提供了一种更为灵活和强大的渲染系统,可以动态生成内容,并且能够很好地处理用户...

    html5 canvas.rar

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,提供了丰富的API来创建交互式图像。这个"html5 canvas.rar"压缩包包含了一个关于Canvas的实例,非常适合那些想要学习或深化对HTML5 ...

    HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文【PDF】

    基瑞编著的《HTML5Canvas核心技术:图形动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary*...

    HTML 5 CANVAS游戏开发实战

    标题中提到的“HTML 5 CANVAS游戏开发实战”涉及到的知识点包括了HTML 5技术、CANVAS元素以及游戏开发方面的实战应用。HTML 5是最新版本的超文本标记语言,它引入了诸多新的特性来增强网页的表现性能和实现更丰富的...

    HTML5 Canvas核心技术—图形、动画与游戏开发一书源代码

    HTML5 Canvas是Web开发中的一个关键技术,它提供了一个在网页上绘制图形的API,使得开发者可以直接在浏览器中创建丰富的交互式2D图形、动画以及游戏。"HTML5 Canvas核心技术—图形、动画与游戏开发"这本书深入浅出地...

    HTML5 canvas绘制流程图

    HTML5的canvas元素是网页开发中的一个强大工具,它提供了在网页上动态绘制图形的能力,类似于画布。在这个场景中,我们关注的是如何利用canvas来创建一个流程图,一种用于表示程序逻辑或工作流程的图表。流程图通常...

    HTML5 Canvas核心技术 图形、动画与游戏开发电子书

    HTML5 Canvas核心技术 图形、动画与游戏开发

Global site tag (gtag.js) - Google Analytics