128kj
- 浏览: 583754 次
- 来自: ...
-
文章分类
最新评论
-
lgh1992314：
相同的元素呢
一种离散化方法 -
HelloSummerR：
圆心的位置是随机的，于是圆的部分会落到canvas外，那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio：
好久没见到sokuban了，这有个java版的，带源码，可以参 ...
求推箱子的最小步数（java) -
肖泽文：
太好了，谢谢你。。有中文注释！
HTML5 推箱子游戏过关演示动画 -
swm8023：
删除操作，将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)（JAVA）
效果图：
效果链接：
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
效果链接：
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 旋转的“金字塔”
2015-12-24 13:25 10023效果图： 效果链接：http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12895效果图： 效果链接： http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7385效果图： 效果链接： http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1579效果图： 点击观看效果：http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3200网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）
2014-07-05 07:13 1371接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二（方块）
2014-07-04 13:08 1661接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）
2014-07-04 10:53 2333在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏（数字版）
2014-06-28 17:38 2487今天网上发现了一段代码，只有界面，很不错，学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1075效果图： 点击查看效果： http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 1931效果图： 点击看效果： http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1660先要准备应付各种浏览器的声音文件，什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1901看到哪，学到哪，记到哪。见谅，这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2918一直在学习HTML5 Canvas相关内容，游戏，动画 ... -
javaScript 广度优先搜索法"自动推箱子"（一）
2014-06-12 09:45 1780用JS写了一个“广度优先搜索法”自动推箱子，理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2216欢迎访问博主的网站：http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1398点击这里可以查看动画效果： http://www.108js. ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2409<!DOCTYPE HTML> <html& ... -
HTML5 Canvas动画模板
2014-05-21 10:59 1021创建HTML5的画布动画，我们可以使用requestAn ... -
HTML5 Canvas 圆弧动画（绕四周运动）
2014-05-14 10:44 2733点击这里可以看到动画效果： http://www.108js. ...
相关推荐
HTML5 Canvas绘制五星红旗.docx
《HTML 5 Canvas基础教程》从HTML5和JavaScript（以及jQuery）的基础知识讲起，全面介绍了HTML5Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等，让...
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
html5 canvas 播放视频html5 canvas 播放视频
资源名称：HTML5 Canvas基础教程内容简介：《HTML5 Canvas基础教程》从HTML5和Javaｓｃｒｉｐｔ(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
html5 canvas 制作流程图 EaselJS html5 canvas 制作流程图 EaselJS
《HTML5 Canvas核心技术》内的实例代码
《HTML5 Canvas 开发详解》第二版pdf 版
高清版 HTML5 CANVAS核心技术图形动画与游戏开发（爱飞翔）.pdf
HTML5 Canvas核心技术 图形、动画与游戏开发
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据...
html5 canvas流动的瀑布动画特效 html5 canvas流动的瀑布动画特效
HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战HTML 5 CANVAS游戏开发实战
HTML5 canvas仿windows屏保动态管道，设置速度、线条宽度请修改speed与default_width。
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
html5 canvas容器温度计特效 html5 canvas容器温度计特效
酷炫的html5 canvas全屏背景动画特效
HTML5 Canvas五彩缤纷的3D发光水晶球动画 HTML5 Canvas五彩缤纷的3D发光水晶球动画