HTML 5 基础教程

一、什么是 Canvas 画布？

• <canvas> 标签只是图形容器，您必须使用脚本来绘制图形
• 画布是一个矩形区域，您可以控制其每一像素
• canvas 拥有多种方法来 绘制路径、矩形、圆形、字符以及图像

二、为什么需要 Canvas 画布 ？

三、浏览器兼容

一、在页面中创建 Canvas 标签

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

二、通过 JavaScript 来动态绘制和处理图形

1. 使用dom通过id获取canvas对象：var c=document.getElementById("myCanvas");
2. 创建画布的上下文对象 context（此对象是HTML5 的内置对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，使用getContext("2d") 函数来获取） 准备绘制：var ctx=c.getContext("2d");
3. 使用上下文对象 context 的方法来绘制和处理图形

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//绘制一个红色的矩形
cxt.fillStyle="#FF0000"; //设置矩形填充颜色为红色，fillStyle属性值可以是CSS颜色、渐变或图案。fillStyle 默认设置是#000000（黑色）
cxt.fillRect(0,0,150,75); //设置矩形的位置、大小和尺寸，fillRect(x,y,width,height) 方法定义了矩形当前的填充方式
</script>

• canvas 画布可以看做是一个二维网格，横向可以看做X轴，纵向可以看做是Y轴
• canvas 二维画布的左上角坐标为 (0,0)
• canvas 中所有需要绘制的对象 都是基于左上角坐标位置
• ctx.fillRect(0,0,150,75) 方法实现的功能为：从左上角开始 (0,0)，在画布上绘制 150x75 的矩形图形

一、使用 Canvas 绘制路径

1. moveTo(x,y) 定义线条开始坐标
2. lineTo(x,y) 定义线条结束坐标
3. 使用 stroke() 方法来绘制线条

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3; margin: 0 auto; display: block;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>
<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>

二、使用 Canvas 绘制圆形

1. 使用 beginPath() 方法来清除当前画布中存在的路径 并且 准备开始绘制新的路径
2. 调用 arc() 方法，传入相应的参数
3. 使用 stroke() 方法来绘制线条

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(80,28,25,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
</script>

三、使用 Canvas 实现渐变

1. createLinearGradient(x,y,x1,y1) - 创建线条渐变
2. createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

1. 创建渐变对象（线性还是径向）
2. 使用两种或两种以上的停止颜色来实现颜色渐变效果：addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1
3. 应用渐变到画布元素中，设置画布上下文对象的 fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    // 创建渐变
    var grd=ctx.createLinearGradient(0,0,200,0); //线性
    //var grd=ctx.createRadialGradient(75,50,5,90,60,100); //径向
    grd.addColorStop(0,"blue");
    grd.addColorStop(1,"white");

    // 填充渐变
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
</script>

四、使用 Canvas 绘制图像

1. 获取或者创建 图像的dom对象
2. 使用 drawImage 方法实现图像的绘制

<canvas id="myCanvas" width="200" height="180" style="border:1px solid #0D5BB3;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>
<img id="img" src="/static/resource/img/logo.png" style="display: none;" />
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    //创建图像的dom对象，第一种方法
    var img=new Image();
    img.src="/static/resource/img/logo.png";
    //创建图片的dom对象，第二种方法
    //var img= document.getElementById("img");
    ctx.drawImage(img,0,0);
</script>

五、使用 Canvas 绘制文本

1. 使用 font  属性来定义字体
2. 使用 fillText(text,x,y) 在 canvas 上绘制实心的文本
3. 使用 strokeText(text,x,y) 在 canvas 上绘制空心的文本

<canvas id="myCanvas" width="200" height="180" style="border:1px solid #0D5BB3;">
    您的浏览器不支持HTML5 Canvas标签
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px 微软雅黑";
    ctx.fillText("Hello World",10,50); //绘制实心文字
    //ctx.strokeText("Hello World",10,50); //绘制空心文字
</script>