关于html5画布(canvas)

canvas:用于绘制图像(通过脚本,通常是 JavaScript)。元素本身并没有绘制能力(它仅仅是图形的容器) 您必须使用脚本来完成实际的绘图任务.

getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。

常用属性:

fillStyle: 设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle: 设置或返回用于笔触的颜色、渐变或模式

shadowColor: 设置或返回用于阴影的颜色

shadowBlur:设置或返回用于阴影的模糊级别

font: 设置或返回文本内容的当前字体属性

textAlign: 设置或返回文本内容的当前对齐方式

常用方法:

createLinearGradient() 创建线性渐变(用在画布内容上) 
createPattern() 在指定的方向上重复指定的元素 
lineWidth 设置或返回当前的线条宽度 
rect() 创建矩形 
fillRect() 绘制“被填充”的矩形 
strokeRect() 绘制矩形(无填充) 
clearRect() 在给定的矩形内清除指定的像素 
fill() 填充当前绘图(路径) 
stroke() 绘制已定义的路径 
beginPath() 起始一条路径,或重置当前路径 
moveTo() 把路径移动到画布中的指定点,不创建线条 
closePath() 创建从当前点回到起始点的路径 
lineTo() 添加一个新点,然后在画布中创建从该点到最后指定点的线条 
quadraticCurveTo() 创建二次贝塞尔曲线 
bezierCurveTo() 创建三次方贝塞尔曲线 
arc() 创建弧/曲线(用于创建圆形或部分圆) 
scale() 缩放当前绘图至更大或更小 
rotate() 旋转当前绘图 
translate() 重新映射画布上的 (0,0) 位置 
fillText() 在画布上绘制“被填充的”文本 
strokeText() 在画布上绘制文本(无填充) 
createImageData() 创建新的、空白的 ImageData 对象 
getImageData() 返回 ImageData 对象,该对象为画布上指定的矩形复制像素数据 
save() 保存当前环境的状态 
restore() 返回之前保存过的路径状态和属性

-------------------
利用画布和javascript我们可以实现很多动画效果,虽然css+javascript也可以实现动画的效果,但是css+javascript执行效率没有画布和javascript高,由于css+javascript每执行一次,都会刷新一次页面,页面整个内容会加载一次。但是画布+javascript不会,每次都是从新加载画布的内容,真个页面的布局不会打乱。所以从执行效率来说,还是画布和javascript有优势。

下面是用画布和javascript结合做的一个动画效果:

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  *{margin: 0;padding: 0}
  body{
  text-align: center;
  }
  canvas{
  margin: 20px auto;
  border: 1px solid;
  }
  audio{
  position: absolute;
  top: 100px;
  left: 950px;
  }
  </style>
  </head>
  <body>
  <canvas id="myCanvas" width="900" height="600"></canvas>
  <audio src="12345.mp3" controls="controls" autoplay="autoplay">你的浏览器不支持音频播放</audio>
  </body>
  <script>
  var c=document.getElementById("myCanvas");
  var cxt=c.getContext("2d");
  back();
  id1=setTimeout("head()",10);
  id2=setTimeout("body()",1000);
  id3=setTimeout("hand()",2000);
  id4= setTimeout("foot()",3000);
  id5=setTimeout("feeler()",4000);
  id6=setTimeout("shan()",6000);
   
  function back(){
   
  cxt.fillStyle="black";
  cxt.beginPath();
  cxt.fillRect(250,50,400,500);
  cxt.closePath();
   
   
  }
  function head(){
   
  cxt.fillStyle="#5acc42";
  cxt.beginPath();
  cxt.arc(450,200,100,Math.PI,2*Math.PI);
  cxt.closePath();
  cxt.fill();
  cxt.fillStyle="black";
  cxt.beginPath();
  cxt.arc(410,150,12,0,2*Math.PI);
  cxt.arc(490,150,12,0,2*Math.PI);
  cxt.closePath();
  cxt.fill();
   
   
  }
  function body(){
   
  cxt.fillStyle="#5acc42";
  cxt.beginPath();
  cxt.fillRect(350,220,200,180);
  cxt.closePath();
   
  cxt.beginPath();
  cxt.fillRect(370,400,160,20);
  cxt.closePath();
   
  cxt.beginPath();
  cxt.arc(370,400,20,0,2*Math.PI);
  cxt.arc(530,400,20,0,2*Math.PI);
  cxt.closePath();
  cxt.fill();
   
  }
   
  function hand(){
  cxt.fillStyle="#5acc42";
  cxt.beginPath();
  cxt.fillRect(290,250,40,100);
  cxt.fillRect(570,250,40,100);
  cxt.closePath();
   
  cxt.beginPath();
  cxt.arc(310,250,20,0,2*Math.PI);
  cxt.arc(310,350,20,0,2*Math.PI);
  cxt.closePath();
  cxt.fill();
   
  cxt.beginPath();
  cxt.arc(590,250,20,0,2*Math.PI);
  cxt.arc(590,350,20,0,2*Math.PI);
  cxt.closePath();
  cxt.fill();
   
  }
   
  function foot(){
  cxt.fillStyle="#5acc42";
  cxt.beginPath();
  cxt.fillRect(380,419,40,80);
  cxt.fillRect(480,419,40,80);
  cxt.closePath();
   
  cxt.beginPath();
  cxt.arc(400,500,20,0,2*Math.PI);
  cxt.closePath();
  cxt.fill();
   
  cxt.beginPath();
  cxt.arc(500,500,20,0,2*Math.PI);
  cxt.closePath();
  cxt.fill();
   
  }
   
  function feeler(){
  cxt.fillStyle="#5acc42";
  cxt.beginPath();
  cxt.save();
  cxt.translate(390,75);
  cxt.rotate(-30*Math.PI/180);
  cxt.fillRect(-20,0,8,40);
  cxt.closePath();
  cxt.beginPath();
  cxt.arc(-16,0,4,0,2*Math.PI);
  cxt.closePath();
  cxt.restore();
  cxt.fill();
   
  cxt.beginPath();
  cxt.save();
  cxt.translate(500,75);
  cxt.rotate(30*Math.PI/180);
  cxt.fillRect(20,-5,8,40);
  cxt.closePath();
  cxt.beginPath();
  cxt.arc(24,-5,4,0,2*Math.PI);
  cxt.closePath();
  cxt.restore();
  cxt.fill();
  }
   
  function shan(){
  cxt.clearRect(250,50,400,500);
  back();
  clearTimeout(id1);
  clearTimeout(id2);
  clearTimeout(id3);
  clearTimeout(id4);
  clearTimeout(id5);
  clearTimeout(id6);
  setTimeout("shan1()",500);
  }
  function shan1(){
  clearTimeout(id1);
  clearTimeout(id2);
  clearTimeout(id3);
  clearTimeout(id4);
  clearTimeout(id5);
  clearTimeout(id6);
  head();
  body();
  hand();
  foot();
  feeler();
   
  setTimeout("shan()",1000);
  }
   
   
  </script>
  </html>
时间: 07-11

关于html5画布(canvas)的相关文章

HTML5 画布canvas元素

HTML5 画布canvas元素 HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小看了这个画布,它能实现无限的可能性.接下来我们从最简单的部分开始,逐步认识Canvas的强大功能. 1.在页面中添加canvas元素: 默认情况下,Canvas所创建的矩形区域大小为宽300像素,高150像素,不过我们可以使用width和height属性来自定义画布

HTML5画布(CANVAS)速查简表

HTML5画布(CANVAS)元素 >HTML5画布(Canvas)元素 <canvas id="myCanvas" width="500" height="300"> 浏览器不支持画布(canvas)时的备案 <canvas id="myCanvas" width="500" height="300"> your browser doesn't suppo

HTML5 画布 Canvas

利用html5的canvas元素使用 JavaScript 在网页上绘制图像. 通过规定尺寸.颜色和位置,来绘制一个圆: <!DOCTYPE htma> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #3CF;"> Your browser does not

关于HTML5画布canvas的功能

一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000”></canvas> 2.使用JavaScript来绘制图像 <script> Var c=document.getElementByID(“myCanvas”)//得到画布 Var ctx=c.getContext(“2d”);//得到画笔 Cxt.fillS

HTML5 画布canvas

SVG的<defs> <symbols> 元素用于预定义一个元素使其能够在SVG图像中重复使用 <svg xmlns="http://www.w3.org/2000/svg" width="500" height="100">     <symbol id="shape2">         <circle cx="25" cy="25&quo

html5画布

html5画布 Canvas: 什么是 Canvas? canvas 元素用于在网页上绘制图形. HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: <canvas id="myCanvas" width="200"

【OneAPM】极客编程挑战#023:使用HTML5画布生成渐变自由落体小球效果

本期挑战 给定如下HTML: <canvas id="gbcanvas" width="350" height="300"></canvas> 阅读如下的相关HTML5画布教程: HTML5画布实现的粒子运动效果 HTML5画布Canvas基础入门 请使用HTML5画布生成一个自由落体效果的渐变小球,效果如下(点击下图查看GIF动画) 渐变色由#dd4814开始, 由#FFFF66结束 提交方式: 录制代码编写过程或最终代

浅尝HTML5之canvas

转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和nav,audio,datalist,details,video,progress,embed等标签 section 标签用于标识页面上的重要内容部分.该标签有点类似于将一本书分成几个章节. article 标签标识了 Web 页面中的主要内容. aside 标签表示arcitle元素内容之外的.与

HTML5 画布上的 Three.js 环境灯光(HTML5 Canvas Three.js Ambient Lighting)

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. HTML5 画布上的 Three.js 环境灯光HTML5 Canvas Three.js Ambient Lighting <!DOCTY

如何在html5的canvas画布中绘制gif动态图片

我们都知道如何在html5的canvas画布上绘制静态图片(jpeg, png等),直接用canvas中的drawImage方法即可,那么如何绘制动态图片(gif)? 相信大家都知道动态图片之所以动态,是因为它是由很多图片按一定的帧数顺序播放而成的,因此我们是否也可以模拟这样的帧数,每隔一定的时间重新 绘制图片,就能画出动态图片呢?答案当然是YES.下面就是我自己测试的一个例子,代码如下: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 &l