HTML5中的 Canvas
什么是Canvas?
Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像。Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形。
我们可以用Canvas做以下:
1. 游戏:毫无疑问,游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧,运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥更大的潜力,在很多节点时不会很卡。
2. 图表制作:图表制作时常被人们忽略,但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作,也可以用Canvas来实现。当然,使用SVG(可缩放矢量图形)来完成图表制作也是非常好的方法。
3. banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过。
4. 远程计算机控制:Canvas可以让开发者更好地实现基于Web的数据传输,构建一个完美的可视化控制界面。
5. 字体设计:对于字体的自定义渲染将完全可以基于Web,使用HTML5技术进行实现。
6. 图形编辑器:Ohad预测,图形编辑器将能够100%基于Web实现。
7. 其他可嵌入网站的内容:类似图表、音频、视频,还有许多元素能够更好地与Web融合,并且不需要任何插件。
绘制简单图形:
getContext()方法用来返回一个环境对象,该对象导出一个二维绘图API。可以理解为它返回的是一个用于在画布(canvas)上绘图的环境。其目前唯一的合法值为“2d”。
beginPath()方法在一个画布中开始子路径的一个新的集合。beginPath()丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为(0,0)。当一个画布的环境被第一次创建,beginPath()方法会被显式的调用。
closePath()方法关闭一条打开的子路径。
如果画布的子路径是打开的,closePath() 通过添加一条线条连接当前点和子路径起始点来关闭它。
如果子路径已经闭合了,这个方法不做任何事情。
一旦子路径闭合,就不能再为其添加更多的直线或曲线了。要继续向该路径添加,需要通过调用 moveTo()方法来开始一条新的子路径。
void moveTo(x, y);
用于显式地指定路径的起点。默认状态下,第一条路径的起点是画布的(0, 0)点,之后的起点是上一条路径的终点。两个参数分为表示起点的x、y坐标值。
void lineTo(x, y);
用于描绘一条从起点从指定位置的直线路径,描绘完成后绘制的起点会移动到该指定位置。参数表示指定位置的x、y坐标值。
通过指定从何处开始,在何处结束,来绘制一条线:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
drawImage(image, dx, dy);
drawImage(image, dx, dy,dw, dh);
drawImage(image, sx, sy,sw, sh, dx, dy, dw, dh);
下图展示了原型中各参数的含义:
N.jpg)

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>
还有一些常用图形
void rect(left, top,width, height);
用于描绘一个已知左上角顶点位置以及宽和高的矩形,描绘完成后Context的绘制起点会移动到该矩形的左上角顶点。参数表示矩形左上角顶点的x、y坐标以及矩形的宽和高。
void arc(x, y, radius,startAngle, endAngle, anticlockwise);
用于描绘一个以(x, y)点为圆心,radius为半径,startAngle为起始弧度,endAngle为终止弧度的圆弧。anticlockwise为布尔型的参数,true表示逆时针,false表示顺时针。参数中的两个弧度以0表示0°,位置在3点钟方向;Math.PI值表示180°,位置在9点钟方向。
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.arc(100,100,70,0,130*Math.PI/180,true);
ctx.stroke();
</script>
void stroke();
用于按照已有的路径绘制线条。
void fill();
用于使用当前的填充风格来填充路径的区域。
strokeStyle
线条的颜色,默认为”#000000”,其值可以设置为CSS颜色值、渐变对象或者模式对象。
fillStyle
填充的颜色,默认为”#000000”,与strokeStyle一样,值也可以设置为CSS颜色值、渐变对象或者模式对象。
lineWidth
线条的宽度,单位是像素(px),默认为1.0。
lineCap
线条的端点样式,有butt(无)、round(圆头)、square(方头)三种类型可供选择,默认为butt。
图形变形
平移context.translate(x,y)
x:坐标原点向x轴方向平移x
y:坐标原点向y轴方向平移y
缩放context.scale(x,y)
x:x坐标轴按x比例缩放
y:y坐标轴按y比例缩放
旋转context.rotate(angle)
angle:坐标轴旋转x角度(角度变化模型和画圆的模型一样)
HTML5 Canvas雪花特效,实现的动态效果的雪花飘飘落下,随机位置,随机数量,并且速度可调节。
<!DOCTYPE html>
<html>
<head>
<title>Canvas雪花飘啊飘</title>
</head>
<body>
<canvas id="mc" width="420" height="280" style="border:1px solid black"></canvas>
<script type="text/javascript">
function createFlower(context,n,dx,dy,size,length){
context.beginPath();
context.moveTo(dx,dy+size);
var dig = 2*Math.PI/n;
for(var i=1;i<n+1;i++){
var ctrlX = Math.sin((i-0.5)*dig)*length+dx;
var ctrlY = Math.cos((i-0.5)*dig)*length+dy;
var x = Math.sin(i*dig)*size+dx;
var y = Math.cos(i*dig)*size+dy;
context.quadraticCurveTo(ctrlX,ctrlY,x,y);//画曲线
}
context.closePath();
}
snowPos = [
{x:50,y:44,z:5},{x:140,y:35,z:3},
{x:360,y:20,z:1},{x:250,y:50,z:2},
{x:110,y:90,z:4},{x:310,y:85,z:2},
{x:65,y:160,z:5},{x:205,y:130,z:5},
{x:300,y:150,z:3},{x:260,y:210,z:1},
{x:375,y:215,z:3},{x:155,y:230,z:2},
{x:30,y:270,z:4},];
function fall(context){
context.fillStyle = "#000";
context.fillRect(0,0,420,280);
context.fillStyle = "#fff";
for(var i=0,len=snowPos.length;i<len;i++){
context.save();
context.translate(snowPos[i].x,snowPos[i].y);//平移
context.rotate((Math.random()*6-3)*Math.PI/10);//旋转
snowPos[i].y += Math.random()*18;
if(snowPos[i].y>280){
snowPos[i].y=4;
}
createFlower(context,6,0,0,snowPos[i].z,8);
context.fill();
context.restore();
}
}
var canvas = document.getElementById("mc");
var ctx = canvas.getContext("2d");
setInterval("fall(ctx);",200);
</script>
</body>
</html>
HTML5中的 Canvas的更多相关文章
- HTML5中的canvas基本概念及绘图
* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- HTML5 中的 canvas 画布(一)
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
- HTML5中的Canvas详解
什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...
- HTML5中的Canvas和SVG
Canvas 和 SVG 都允许我们在浏览器中创建图形,但是它们在根本上是不同的. 1 SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中 ...
- HTML5 中的 canvas 画布(二)
绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image(); // 先创建图片对象 image.src = '图片的 ...
- HTML5中的Canvas
1.Canvas标签的宽高一定要设置在标签上或者采用js添加属性,如果用css去设置的话,会把画布被拉伸,相当于将默认的画布拉伸到指定位置.默认为300px*100px; <canvas wid ...
- [Selenium] 操作 HTML5 中的 Canvas 绘制图形
测试 http://literallycanvas.com/ 以 Chrome Driver 为例阐述,通过 Actions 在 Canvas 上绘制一个封闭图形.对于 Canvas 上的操作,推荐 ...
- HTML5中的Canvas精品教程
http://javascript.ruanyifeng.com/htmlapi/canvas.html
随机推荐
- HDU 2295 Radar (重复覆盖)
Radar Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- OAuth 2.0 Threat Model and Security Considerations (rfc6819)
Authorization server The following data elements are stored or accessible on the authorization serve ...
- JS中 计算器的简单制作
今天学习的是JS中的if语句,除此之外老师还教给我们switch语句的用法, 我们用来写了简单计算器的算法,如下: <script> var a=prompt("请输入一个数字& ...
- 关于yii2框架活动记录activeRecord添加默认字段的问题
平时使用sql的时候可以如下添加默认字段flag: "select a.*,0 as flag from user_info a", 对于yii2框架则需要这样: $query = ...
- js操作document文档元素 节点交换交换
<input type="text" value="1" id='text1'> <input type="text" v ...
- eclipse中的代码提示功能
Eclipse 的代码提示功能,具体配置 1. 打开Eclipse ,然后"window"→"Preferences" 2. 选择"java" ...
- JavaWeb技术(二):DAO设计模式
1. DAO全称:Data Access Object , 数据访问对象.使用DAO设计模式来封装数据持久化层的所有操作(CRUD),使得数据访问逻辑和业务逻辑分离,实现解耦的目的. 2. 典型的DA ...
- python迭代器和生成器
迭代器 #可以被netxt()函数调用不断返回一个值的对象成为迭代器:Iterator #迭代器是访问集合元素的一种方式,从集合第一个元素开始(用next()方法)访问就不能回退,便于循环遍历一些较大 ...
- hdu 5877 (dfs+树状数组) Weak Pair
题目:这里 题意: 给出一个n个结点的树和一个数k,每个结点都有一个权值,问有多少对点(u,v)满足u是v的祖先结点且二者的权值之积小于等于k. 从根结点开始dfs,假设搜的的点的权值是v,我们需要的 ...
- git分支管理一
1.创建本地分支 local_branch git branch local_branch 2.创建本地分支local_branch 并切换到local_branch分支 git checkout - ...