什么是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);

下图展示了原型中各参数的含义：

其中，image参数可以是HTMLImageElement、HTMLCanvasElement或者HTMLVideoElement。第三个方法原型中的sx、sy在前两个中均为0，sw、sh均为image本身的宽和高；第二和第三个原型中的dw、dh在第一个中也均为image本身的宽和高。
<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的更多相关文章

  1. HTML5中的canvas基本概念及绘图

    * Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的 ...

  2. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  3. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  4. HTML5中的Canvas详解

    什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...

  5. HTML5中的Canvas和SVG

    Canvas 和 SVG 都允许我们在浏览器中创建图形,但是它们在根本上是不同的. 1 SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中 ...

  6. HTML5 中的 canvas 画布（二）

    绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image();  // 先创建图片对象 image.src = '图片的 ...

  7. HTML5中的Canvas

    1.Canvas标签的宽高一定要设置在标签上或者采用js添加属性,如果用css去设置的话,会把画布被拉伸,相当于将默认的画布拉伸到指定位置.默认为300px*100px; <canvas wid ...

  8. [Selenium] 操作 HTML5 中的 Canvas 绘制图形

    测试 http://literallycanvas.com/ 以 Chrome Driver 为例阐述,通过 Actions 在 Canvas 上绘制一个封闭图形.对于 Canvas 上的操作,推荐 ...

  9. HTML5中的Canvas精品教程

    http://javascript.ruanyifeng.com/htmlapi/canvas.html

随机推荐

  1. 三款Javascript SPAs框架资料整理和总结

    一.框架介绍 RequireJS 资料:http://www.requirejs.cn/RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可 ...

  2. java工程笔记

    start.sh #TITLE=jetty DEPLOY_PATH=$(cd $()/../ && pwd) export DEPLOY_PATH CLASSPATH=${CLASSP ...

  3. nginx配置文件httpd.conf详解

     PS:Nginx使用有两三年了,现在经常碰到有新用户问一些很基本的问题,我也没时间一一回答,今天下午花了点时间,结合自己的使用经验,把Nginx的主要配置参数说明分享一下,也参考了一些网络的内容,这 ...

  4. SwipeRefreshLayout嵌套ScrollView包裹复杂头布局和RecyclerView

    布局如下:上面是一个描述有:头像和部分信息的布局,底部是一个RecyclerView: 想法:想实现RecyclerView向上滚动的时候,隐藏上面的头像布局信息:使用了 CoordinatorLay ...

  5. 使用Maven自动部署Java Web应用到Tomcat服务器

    学习如何使用Maven,我推荐一本工具书,<maven the definitive guide>.在这本工具书手中,详细介绍了maven的使用思想,并且提供了从基本到复杂的具体项目应用. ...

  6. hdu 1455 Sticks（dfs+剪枝）

    题目大意: George有许多长度相同的木棍,随机的将这些木棍砍成小木条,每个小木条的长度都是整数单位(长度区间[1, 50]).现在George又想把这些小木棒拼接成原始的状态,但是他忘记了原来他有 ...

  7. mysql从零开始

    常用的数据库有哪些? oralce,sqlserver,mysql,db2 有钱就用oracle吧 oracle和mysql的区别:https://zhidao.baidu.com/question/ ...

  8. [刘阳Java]_避开环境配置快速的使用Java的开发工具_第5讲

    我们一般学习Java都应该遵循通过系统的命令工具来编译Java程序,然后对编译好Java程序进行运行,这个是非常好的习惯.但是随着后期学习Java技术的深入我们也得像Java的IDE工具屈服.所以,可 ...

  9. CodeSmith Merge策略--小白教程

        为了让 自动产生的代码 和 程序员手写的代码 互不干涉, 提出了Merge策略, 包括以下三种 InsertRegion: 只插入(覆盖)到指定 #region区域 InsertClass: ...

  10. git更换仓库地址

    1.  从原始地址 clone 一份不包含 work copy的仓库: git clone --bare bitbucket_project_address 2. 在os china上创建同名项目. ...