- 浏览: 601151 次
- 来自: ...
文章分类
最新评论
-
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
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10075效果图: 效果链接:http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12963效果图: 效果链接: http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7446效果图: 效果链接: http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1622效果图: 点击观看效果:http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3263网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)
2014-07-05 07:13 1408接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)
2014-07-04 13:08 1698接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)
2014-07-04 10:53 2403在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏(数字版)
2014-06-28 17:38 2566今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1122效果图: 点击查看效果: http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 1977效果图: 点击看效果: http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1701先要准备应付各种浏览器的声音文件,什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1980看到哪,学到哪,记到哪。见谅,这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2987一直在学习HTML5 Canvas相关内容,游戏,动画 ... -
javaScript 广度优先搜索法"自动推箱子"(一)
2014-06-12 09:45 1860用JS写了一个“广度优先搜索法”自动推箱子,理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2257欢迎访问博主的网站:http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1462点击这里可以查看动画效果: http://www.108js. ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2445<!DOCTYPE HTML> <html& ... -
HTML5 Canvas动画模板
2014-05-21 10:59 1072创建HTML5的画布动画,我们可以使用requestAn ... -
HTML5 Canvas 圆弧动画(绕四周运动)
2014-05-14 10:44 2784点击这里可以看到动画效果: http://www.108js. ...
相关推荐
HTML5 Canvas 绘制五星红旗 HTML5 中的 Canvas 绘图 API 不在 `<canvas>` 元素本身上定义,而是定义在通过画布的 `getContext()` 方法获得的一个绘图环境对象上。Canvas API 也使用路径的表示法,但路径由一系列的...
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飘洒的...
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
HTML5 Canvas 是一个强大的网页图形绘制工具,允许开发者在网页上动态绘制图像,而无需依赖任何插件。在这个场景中,我们关注的是如何利用Canvas来播放视频。这涉及到HTML5的Media API和Canvas API的结合使用,使得...
资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式用户体验。Canvas API提供了大量的方法和属性,使得JavaScript可以直接控制像素级别的图像操作。这个压缩包...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图像处理,包括绘制、修改和操作图像。在HTML5 Canvas中,我们可以通过JavaScript API实现图片的压缩功能,这对于优化网页性能,尤其是处理...
HTML5 canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript动态创建和修改二维图形,从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中,我们利用canvas元素来模仿经典的Windows屏保...
《HTML5 Canvas 开发详解》第二版pdf 版
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式2D内容。这个“html5 canvas 游戏”是一个基于HTML5 Canvas技术开发的小游戏,主题是“兔子吃萝卜”,展示了...
HTML5 Canvas API 是一项强大的技术,它允许在网页中直接绘制图形、图表、图像以及动画。与传统的图像加CSS的方法相比,Canvas API 提供了一种更为灵活和强大的渲染系统,可以动态生成内容,并且能够很好地处理用户...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,提供了丰富的API来创建交互式图像。这个"html5 canvas.rar"压缩包包含了一个关于Canvas的实例,非常适合那些想要学习或深化对HTML5 ...
基瑞编著的《HTML5Canvas核心技术:图形动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary*...
标题中提到的“HTML 5 CANVAS游戏开发实战”涉及到的知识点包括了HTML 5技术、CANVAS元素以及游戏开发方面的实战应用。HTML 5是最新版本的超文本标记语言,它引入了诸多新的特性来增强网页的表现性能和实现更丰富的...
HTML5 Canvas是Web开发中的一个关键技术,它提供了一个在网页上绘制图形的API,使得开发者可以直接在浏览器中创建丰富的交互式2D图形、动画以及游戏。"HTML5 Canvas核心技术—图形、动画与游戏开发"这本书深入浅出地...
HTML5的canvas元素是网页开发中的一个强大工具,它提供了在网页上动态绘制图形的能力,类似于画布。在这个场景中,我们关注的是如何利用canvas来创建一个流程图,一种用于表示程序逻辑或工作流程的图表。流程图通常...
HTML5 Canvas核心技术 图形、动画与游戏开发