在HTML5一览中,我们提到html 5被冠以很多高帽,其中最高的一顶、备受争议的就是"Flash杀手"。IT评论界老喜欢用这个词了,杀手无处不在。不管是不是杀手,HTML 5引进的一些新特性确实让人兴奋不已。最令人期待的之一就是 canvas元素。
作为HTML5标准的一部分,Canvas元素允许脚本动态渲染点阵图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 javascript 以使脚本能够把想绘制的东西都绘制到一块画布上。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 canvas 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。
大部分的浏览器都支持 2D canvas 上下文——包括 Opera, Firefox, Konqueror 和 Safari。而且某些版本的 Opera 还支持 3D canvas ,firefox 也可以通过插件形式支持 3D canvas 。我们甚至可以在 IE 中使用 <canvas> 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由 Google 发起)来构建兼容性的画布。 参见:http://excanvas.sourceforge.net/。
效果演示
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
//绘制红色的画布
ctx.fillStyle = '#f00';
ctx.fillRect(0,0,450,300);
ctx.translate(75,75);
//绘制大五角星
ctx.save();
ctx.rotate(Math.PI*2/7);
drawStar(ctx,40);
ctx.restore();
//绘制四个小五角星
ctx.save();
ctx.translate(80,-50);
drawStar(ctx,10);
ctx.restore();
ctx.save();
ctx.translate(110,-10);
drawStar(ctx,10);
ctx.restore();
ctx.save();
ctx.translate(110,30);
drawStar(ctx,10);
ctx.restore();
ctx.save();
ctx.translate(80,70);
drawStar(ctx,10);
ctx.restore();
}
//绘制五角星函数
function drawStar(ctx,r){
ctx.save();
ctx.beginPath()
ctx.moveTo(r,0);
for (var i=0;i<9;i++){
ctx.rotate(Math.PI/5);
if(i%2 == 0) {
ctx.lineTo((r/0.525731)*0.200811,0);
} else {
ctx.lineTo(r,0);
}
}
ctx.closePath();
ctx.fillStyle='#FFFF00';
ctx.fill();
ctx.restore();
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="800" height="300"></canvas>
</body>
</html>
HTML5 代码如下:
03 |
< title >Canvas tutorial</ title > |
04 |
< script type = "text/javascript" > |
06 |
var ctx = document.getElementById('canvas').getContext('2d'); |
08 |
ctx.fillStyle = '#f00'; |
09 |
ctx.fillRect(0,0,450,300); |
13 |
ctx.rotate(Math.PI*2/7); |
18 |
ctx.translate(80,-50); |
22 |
ctx.translate(110,-10); |
26 |
ctx.translate(110,30); |
35 |
function drawStar(ctx,r){ |
39 |
for (var i=0;i< 9 ;i++){ |
40 |
ctx.rotate(Math.PI/5); |
42 |
ctx.lineTo((r/0.525731)*0.200811,0); |
48 |
ctx.fillStyle = '#FFFF00' ; |
54 |
< body onload = "draw();" > |
55 |
< canvas id = "canvas" width = "800" height = "300" ></ canvas > |
- HTML5 canvas 绘制五星红旗
这个例子并不是自己写的,在网上找的案列,仿照写的,,,自己真的公布董这些算法,看完这个例子还是有一点模糊,,, 如果谁看的比较明白,指点一下,,,多谢!!!! <!doctype html> ...
- canvas绘制五星红旗
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- html5的canvas绘制迷宫地图
canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...
- HTML5 之Canvas绘制太阳系
<!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...
- 【HTML5】Canvas绘制基础
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- HTML5 在canvas绘制一个矩形
笔者:本笃庆军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统 ...
- html5的canvas绘制线条,moveTo和lineTo详解
今天在看html5,里面新增的属性有一个canvas,它相当于一个画布你可以用js在里面画你想要的效果!我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚,尤其是moveTo和 ...
- HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...
- html5、canvas绘制本地时钟
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
随机推荐
- js实现监听浏览器窗口大小改变事件
window.onresize = function(){ }
- Spark知识点
1.Spark架构 分布式spark应用中的组件 在分布式环境下,Spark集群采用的是主/从结构.在一个Spark集群中,有一个节点负责中央协调,调度各个分布式工作节点.这个中央协调节点被称为驱动器 ...
- (数据科学学习手札12)K-means聚类实战(基于R)
上一篇我们详细介绍了普通的K-means聚类法在Python和R中各自的实现方法,本篇便以实际工作中遇到的数据集为例进行实战说明. 数据说明: 本次实战样本数据集来自浪潮集团提供的美团的商家信息,因涉 ...
- python2.7练习小例子(十一)
11):题目:判断101-200之间有多少个素数,并输出所有素数. 程序分析:判断素数的方法:用一个数分别去除2到sqrt(这个数),如果能被整除,则表明此数不是素数,反之是素数. ...
- 4364: [IOI2014]wall砖墙
4364: [IOI2014]wall砖墙 链接 分析: 线段树,维护一个最大值,一个最小值. 代码: #include<bits/stdc++.h> ],*p1 = buf,*p2 = ...
- C++基础语言知识大汇总(不断更新!!!)
经过十天的时间,LITTLESUN做好了前期的工作,今天LITTLESUN就要在新地图里扬帆起航喽!!!(撒花) 简单的整理了一下这次启航准备好的物资.后面的航程中也会不断来补充这个小仓库哦!
- I两种冒泡算法
两种冒泡算法: 第一个循环,I 定位当前坐标,第二个循环 把 I 之后的每个数都与 I 比较(比 I 小的都去坐标I),第二个循环之后 坐标 I 为数组里最小的数值. 效率比较高的冒泡算法: stat ...
- thrift 调取 python php go 客户端代码
golang package main import ( "fmt" "git.apache.org/thrift.git/lib/go/thrift" &qu ...
- 云计算之路-阿里云上:Web服务器请求到达量突降
今天下午遇到了自使用阿里云以来首次遇到的新情况——http.sys的ArrivalRate突降(说明请求到达IIS的请求数量少了),而且SLB中的3台ECS都出现了这个问题. 1. 10.161.24 ...
- Vue学习(五):列表渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...