- 浏览: 600182 次
- 来自: ...
文章分类
最新评论
-
lgh1992314:
相同的元素呢
一种离散化方法 -
HelloSummerR:
圆心的位置是随机的,于是圆的部分会落到canvas外,那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio:
好久没见到sokuban了,这有个java版的,带源码,可以参 ...
求推箱子的最小步数(java) -
肖泽文:
太好了,谢谢你。。有中文注释!
HTML5 推箱子游戏过关演示动画 -
swm8023:
删除操作,将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)(JAVA)
国旗的标准画法图。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>中国标准国旗</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
/**
使用HTML5绘制标准五星红旗
*/
</script>
</body>
</html>
观看效果与源码下载:http://www.108js.com/article/article7/70179.html?id=920
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>中国标准国旗</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
/**
使用HTML5绘制标准五星红旗
*/
var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); var width=canvas.width; var height=width*2/3; var w=width/30;//小网格的宽 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); } //辅助线 context.moveTo(0,height/2) context.lineTo(width,height/2); context.stroke(); context.moveTo(width/2,0); context.lineTo(width/2,height); context.stroke(); //画网格,竖线 for(var j=0;j< 15;j++){ context.moveTo(j*w,0); context.lineTo(j*w,height/2); context.stroke(); } //画网格,横线 for(var j=0;j< 10;j++){ context.moveTo(0,j*w); context.lineTo(width/2,j*w); context.stroke(); } //画大圆 context.beginPath(); context.arc(ox,oy,maxR*height,0,Math.PI*2,false); context.closePath(); context.stroke(); // 画小圆 for (var idx = 0; idx < 4; idx++) { context.beginPath(); var sx = minX[idx] * height, sy = minY[idx] * height; context.arc(sx, sy, height * minR,0,Math.PI*2,false); context.closePath(); context.stroke(); } //大圆中心与小圆中心连接线 for (var idx = 0; idx < 4; idx++) { context.moveTo(ox,oy); var sx = minX[idx] * height, sy = minY[idx] * height; context.lineTo(sx, sy); context.stroke(); } //绘制五角星 /** * 创建一个五角星形状. 该五角星的中心坐标为(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(); }
</script>
</body>
</html>
观看效果与源码下载:http://www.108js.com/article/article7/70179.html?id=920
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10072效果图: 效果链接:http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2446效果图: 效果链接: http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12963效果图: 效果链接: http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7445效果图: 效果链接: http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1620效果图: 点击观看效果:http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3261网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)
2014-07-05 07:13 1407接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)
2014-07-04 13:08 1698接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)
2014-07-04 10:53 2402在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏(数字版)
2014-06-28 17:38 2564今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1122效果图: 点击查看效果: http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 1976效果图: 点击看效果: http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1701先要准备应付各种浏览器的声音文件,什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1976看到哪,学到哪,记到哪。见谅,这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2985一直在学习HTML5 Canvas相关内容,游戏,动画 ... -
javaScript 广度优先搜索法"自动推箱子"(二)
2014-06-12 09:57 1340接上文: javaScript 广度优先搜索法"自动 ... -
javaScript 广度优先搜索法"自动推箱子"(一)
2014-06-12 09:45 1854用JS写了一个“广度优先搜索法”自动推箱子,理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2256欢迎访问博主的网站:http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1461点击这里可以查看动画效果: http://www.108js. ... -
javascript for语句最佳实践
2014-05-22 08:22 598当执行冗长的for语句时,要保持语句块的尽量简洁,例如: 糟 ...
相关推荐
使用 HTML5 Canvas 绘制中国国旗需要了解以下几个知识点: 1. Canvas 绘图环境:通过 `getContext()` 方法获得的绘图环境对象,提供了各种绘图方法,如 `fillRect()`、`fill()`、`stroke()` 等。 2. 路径定义:使用...
Html5 Canvas画线有毛边是一个在Web前端开发中常见的问题,特别是在使用Canvas 2D渲染图形时。这个问题主要是由于Canvas中坐标点与像素点之间的对齐问题造成的。下面我们将详细探讨这个问题及解决方案。 **Canvas...
在这个“HTML5 Canvas画印章”的主题中,我们将深入探讨如何利用Canvas API来创建一个逼真的电子印章。 Canvas API是HTML5的一个核心特性,它通过JavaScript提供了一组用于在网页上绘制2D图形的函数。这些函数包括...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制。这个技术为网页带来了丰富的交互性和视觉效果。在这个“html5 canvas画布绘制圆形时钟代码”示例中,我们将深入探讨如何利用Canvas ...
在HTML5标准中,Canvas是其一大亮点,使得网页不仅仅是静态内容的容器,而是能够承载复杂的动态应用。 首先,书中可能会介绍如何在HTML文档中创建Canvas元素,以及如何通过JavaScript获取Canvas的绘图上下文(2D或...
在这个“html5 canvas填色画游戏代码”中,我们主要关注以下几个知识点: 1. **HTML5 Canvas**: HTML5 Canvas是一个基于矢量图形的元素,通过JavaScript API可以进行动态绘图。开发者可以通过调用其提供的方法,如`...
HTML5 Canvas是一个强大的Web图形接口,它允许开发者在网页上绘制矢量图形和位图图像。这个"可定义笔刷和画布的HTML5 Canvas画板画图工具"利用了Canvas API来创建一个互动的画布,用户可以在这个画布上进行绘画,...
在IT行业中,HTML5、Canvas和JavaScript是创建交互式网页内容的重要工具,特别是对于实现动态图形和动画。本文将深入探讨如何使用原生JavaScript和HTML5的Canvas API来创建3D云动画效果。 首先,HTML5 Canvas是一个...
HTML5 canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript动态创建和修改二维图形,从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中,我们利用canvas元素来模仿经典的Windows屏保...
在这个“用HTML5 canvas画的幻灯片”项目中,我们主要会探讨以下几个核心知识点: 1. **HTML5 Canvas基础**: HTML5的canvas是一个基于矢量图形的画布,通过JavaScript来控制其内容。它的基本结构是在HTML中定义一...
HTML5 Canvas 是一种在网页上绘制图形的API,它允许开发者直接在浏览器中进行动态图形渲染,无需依赖任何插件。在这个"HTML5 Canvas 动画时钟"的主题中,我们将深入探讨如何利用Canvas API创建一个实时更新的、美观...
HTML5 Canvas是一个强大的Web图形接口,它允许开发者在网页上直接绘制图形,创建丰富的动态视觉体验。这款基于HTML5 Canvas的彩色渐变背景动画效果,是利用Canvas API来实现的一种互动性极强的视觉特效。当鼠标在...
基瑞编著的《HTML5Canvas核心技术:图形动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary*...
canvas拼图游戏,基于html + canvas画布实现
HTML5 Canvas是Web开发中的一个关键技术,它提供了一个在网页上绘制图形的API,使得开发者可以直接在浏览器中创建丰富的交互式2D图形、动画以及游戏。"HTML5 Canvas核心技术—图形、动画与游戏开发"这本书深入浅出地...
HTML5 Canvas核心技术 图形、动画与游戏开发
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
HTML5 Canvas是HTML5标准中引入的一个强大的图形绘制API,它允许开发者在浏览器上直接用JavaScript进行2D图形的绘制。这个"html5 canvas小人跳舞动画特效"是一个利用Canvas API实现的交互式动画示例,它展示了如何...