从零开始的HTML5之旅（四）

HTML5 Canvas

什么是canvas

  Canvas API是在HTML5中新增的标签，它用于在网页实时生成图像，并且可以操作图像内容，基本上是一个可以用js操作的位图。

  Canvas对象表示一个HTML画布元素canvas。Canvas对象没有自己的行为，它定义了一个API支持脚本化客户端绘图操作。

  简而言之它用于在网上绘制图形。画布是一个矩形区域，我们可以控制其中的每一个像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

浏览器支持

  canvas元素支持chrome 4.0+、IE9.0+、firefox2.0+、Safari 3.1+、opera 9.0+。

创建canvas

绘制图像 
 
  canvas元素本身没有绘图能力，其所有的绘制工作都是在js中完成的。
 
 
长方形
 
 

 
 

  效果如下：
 
 
 
 


角
 
 
  通过指定从何处开始，何处结束来绘制角。
 
 
 
 
 

 
 
 
 var d2=document.getElementById("demo2");
 var ct2=d2.getContext("2d");
 ct2.moveTo(10,10); //将当前位置(0,0)移动到10x,10y
 ct2.lineTo(100,50); //从当前位置(10,10)画一条坐标到100x,50y的直线
 ct2.lineTo(0,100) //从当前位置(100,50)画一条坐标到0x,100y的直线
 ct2.stroke(); //绘制边框
 
 
 
 
 


 
 
圆形
 
 

  通过规定尺寸、颜色、位置来绘制一个圆。
 
 
 
 
 
 




var d3=document.getElementById("demo3");
var ct3=d3.getContext("2d");
ct3.fillStyle="red"; //填充红色
ct3.beginPath(); //开始画布中一个新路径
ct3.arc(100,100,40,0,Math.PI*2,true); //圆心为100x,100y 半径为40 弧度为0 
//Math.PI*2 画一个圆，如果想画半圆就把Math.PI*2改成Math.PI*1
//true是指逆时针方向画，false是顺时针
ct3.closePath(); //关闭路径 
ct3.fill(); //填充当前路径
 
 


 
 
渐变
 
 
  绘制渐变背景。
 
 
 
 
 
 




var d4=document.getElementById("demo4");
var ct4=d4.getContext("2d");
var gkd=ct4.createLinearGradient(0,0,175,50); //创建一条起始坐标为(0,0),终点坐标为(175,50)的线性颜色渐变
gkd.addColorStop(0,"#FF0000");  //前面的参数为浮点值
gkd.addColorStop(1,"#00FF00");  //后面的参数是颜色的目标值
ct4.fillStyle=gkd;
ct4.fillRect(0,0,175,50);
 
 


 
 
图像
 
 
  把图像放到画布上。
 
 
 
 





var d5=document.getElementById("demo5");
var ct5=d5.getContext("2d");
// var img=document.getElementById("img1");
var img=new Image(); //创建一个Image对象
    img.src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2974207213,2775068311&fm=26&gp=0.jpg"; 
img.onload=function(){
         ct5.drawImage(img,0,0); //在一个画布上绘制图像，img是要绘制的图像，0x,0y是起始位置
    }
 
 



完整代码