HTML5中的canvas（画布）

HTML5中的canvas（画布）

1、关于canvas的简介

1.canvas是HTML5标签，表示画布，canvas只是作为图像绘制的容器，所有的绘制工作都在脚本JavaScript内部完成。
2.canvas的作用：①绘制基础图形；②绘制文字；③图形变形和图片合成；④处理图片和视频；⑤动画实现；⑥制作小游戏等等。
3.支持canvas的浏览器：Firefox, safari, chrome, opera, IE9等。

2、创建和获取

① 查看当前浏览器是否支持canvas：
可以在canvas标签内书写提示内容，若当前浏览器不支持canvas，则显示提示内容。
例：

<canvas height="600" width="400">您的浏览器过低，请更换高版本再试</canvas>

注：canvas画布是一个矩形区域，里面的每一个像素都可以被控制。应在canvas标签内设置width和height属性，不要在css里设置，避免以后canvas画出的图像变形（拉伸或者缩放）。
②获取绘制环境：
例：

//获取到canvas标签
var canvas = document.getElementsByTagName('canvas')[0];
//获取绘制上下文对象
var ctx = canvas.getContext('2d');

注：getContext()方法返回一个用于在画布上绘图的环境。此处语法：canvas.getContext(‘2d’)，参数2d指定了你想要在画布上绘制的类型，当前唯一的合法值为"2d"，它指定了二维绘图(2D)。

3.路径方法

4.绘制图形

（1）直线

//直线
ctx.beginPath();
ctx.moveTo(600,50);
ctx.lineTo(400,50);
ctx.closePath();
//宽度
ctx.lineWidth=2;
//边框颜色，若不设置则默认黑色
ctx.strokeStyle='pink';
//描边
ctx.stroke();

（2）三角形

//三角形
ctx.beginPath();
ctx.moveTo(500, 50);
ctx.lineTo(500, 150);
ctx.lineTo(300, 150);
//绘制线条以返回开始点
ctx.closePath();
ctx.lineWidth = 5;
ctx.strokeStyle = 'lightblue';
ctx.stroke();

（3）圆和半圆

    //圆形
    ctx.beginPath();
    //圆形，弧，参数：中心点x,中心点y,半径r,起始弧度和结束弧度,false顺时针,true逆时针
    ctx.arc(250,250,50,0,2*Math.PI);
    ctx.fill()
    //半圆
    ctx.beginPath();
    //圆形，弧，参数：中心点x,中心点y,半径r,起始弧度和结束弧度,false顺时针,true逆时针
    ctx.arc(100,250,50,0,Math.PI);
    ctx.fill()