从零开始的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 id="demo1" height="200" width="200" style="border: 1px solid red; ></canvas>

这里为让画布更明显，因此加上了边框。

绘制图像

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

长方形

<script>
    var d=document.getElementById("demo1"); //获取到canvas元素
    var ct=d.getContext("2d"); //获取到CanvasRenderingContext2D对象
    ct.fillStyle="red"; //填充路径的颜色为红色
    ct.fillRect(0,20,50,100); //起始位置为0x,20y,画一个高为100，宽为50的长方形
</script>

效果如下：

角

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

 <div>
 <canvas id="demo2" width="200" height="200" style="border:1px solid #888888"></canvas>
 </div>
 
 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(); //绘制边框

圆形

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

<div>
<canvas id="demo3"width="200" height="200" style="border:1px solid black" ></canvas>
</div>

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(); //填充当前路径

渐变

绘制渐变背景。

<div>
<canvas id="demo4" width="200" height="200" style="border:1px solid #c3c3c3"></canvas>
</div>

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);

图像

把图像放到画布上。

<div>
<canvas id="demo5" width="200" height="200" style="border:1px solid blue"></canvas>
<!-- <img id="img1" width="180" height="180" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2974207213,2775068311&fm=26&gp=0.jpg"> -->
</div>

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是起始位置
    }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <canvas id="demo1" width="200" height="200" style="border: 1px solid red;"></canvas>
    </div>
    <div>
        <canvas id="demo2" width="200" height="200" style="border:1px solid #888888"></canvas>
    </div>
    <div>
        <canvas id="demo3"width="200" height="200" style="border:1px solid black" ></canvas>
    </div>
    <div>
        <canvas id="demo4" width="200" height="200" style="border:1px solid #c3c3c3"></canvas>
    </div>
    <div>
        <canvas id="demo5" width="200" height="200" style="border:1px solid blue"></canvas>
        <!-- <img id="img1" width="180" height="180" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2974207213,2775068311&fm=26&gp=0.jpg"> -->
    </div>
</body>
</html>

<script>
    //正方形
    var d=document.getElementById("demo1"); //获取到canvas元素
    var ct=d.getContext("2d");
    ct.fillStyle="red";
    ct.fillRect(0,20,50,100);

    //角
    var d2=document.getElementById("demo2");
    var ct2=d2.getContext("2d");
    ct2.moveTo(10,10);
    ct2.lineTo(100,50);
    ct2.lineTo(0,100)
    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);
    ct3.closePath();
    ct3.fill();

    //渐变
    var d4=document.getElementById("demo4");
    var ct4=d4.getContext("2d");
    var gkd=ct4.createLinearGradient(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();
    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);
    }

   
    // var ct5
</script>