初学html5 <canvas>学习笔记

初学html5 <canvas>学习笔记

我的学习地址

• 菜鸟教程网的canvas入门
• 一个大神的学习笔记和实验记录博文

兼容性

• canvas浏览器兼容性：IE9+、FF、Opera、Chorme、Safari已经支持

什么是canvas

1、只是一个容器，标签内的文本会在浏览器不支持canvas才显示出来；
2、这个容器相当于一块画板，要使用javascript脚本语言来上面画画；

如下

    <canvas id="myCanvas" width="100" height="100" style="border: 1px solid #333;">
        您的浏览器不支持canvas！
    </canvas>
    <script>
        var c = document.getElementById("myCanvas");
        ...
    </script>

• 基本方法：使用.getContext(“2d”)获取canvas的封装了很多绘图功能的对象。

    var context = c.getContext("2d");

绘制基本几何形状

• 在进行图形绘制前，要用style设置好绘图的样式

    context.fillStyle//填充的样式
    context.lineWidth//图形边框宽度

• 其中，fillStyle后面，颜色的表示方式如下（和css基本相同）:

    直接用颜色名称:"red" "green" "blue"
    十六进制颜色值: "#EEEEFF"
    rgb(1-255,1-255,1-255)
    rgba(1-255,1-255,1-255,透明度)

• canvas元素绘制图像的时候有两种方法，分别是

    context.fill()//填充
    context.stroke()//绘制边框

矩形

    //画一个以(0,0)为原点、长100宽100、填充颜色#00a1e9的矩形
    context.fillStyle='#00a1e9';
    context.fillRect(0,0,100,100);

    //画一个以(120,0)为原点、长100宽100、填充1px边框#00a1e9的矩形
    context.strokeStyle='#00a1e9';
    context.lineWidth = 1;
    context.strokeRect(120,0,100,100);

清除矩形区域

在给定矩形内清空一个矩形，类似于裁剪，如下：

    //裁剪掉了以（20,20）为原点、长100、宽100的矩形范围
    context.clearRect(20,20,100,100);

圆形

.arc(x,y,半径,开始角度，结束角度，是否逆时针)

    context.beginPath();
    context.arc(100,100,100,0,Math.PI*2,true);
    context.closePath();
    context.fillStyle = '#888';
    context.fill();

以上的代码，画出了一个以（100,100）为圆心、半径为100、360°、逆时针设置的圆

直线

    context.moveTo(0,0);
    context.lineTo(100,100);
    context.lineTo(200,100);
    context.strokeStyle = '#666';
    context.stroke();

以上代码画出了一条从（0,0）到（100,100）再到（200,100）的、由这三个点连接形成的直线段图形，且线条颜色为#666

曲线

1、贝塞尔曲线
.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
cp1x/xp1y分别是第一个控制点的x和y坐标；
cp2x/xp2y分别是第二个控制点的x和y坐标；
x，y是终点坐标

    context.moveTo(0,0);//开始坐标
    context.bezierCurveTo(0,0,100,100,200,200);
    context.strokeStyle = '#666';
    context.stroke();

2、二次样条曲线
.quadraticCurveTo(qcpx,qcpy,qx,qy)
qcpx、qcpy分别是控制点的x和y坐标；
qx、qy是终点坐标

    context.moveTo(0,0);//开始坐标
    context.quadraticCurveTo(50,50,100,100);
    context.strokeStyle = '#666';
    context.stroke();

线性渐变

    var lg = context.createLinearGradient(0,0,0,100);
    lg.addColorStop(0,'#222');
    lg.addColorStop(1,'#666');
    context.fillStyle = lg;
    context.fillRect(0,0,100,100);

径向渐变

    var rg = context.createRadialGradient(100,100,50,100,100,100);
    rg.addColorStop(0,'#222');
    rg.addColorStop(1,'#666');
    context.fillStyle = rg;
    context.beginPath();
    context.arc(100,100,100,0,Math.PI*2,true);
    context.closePath();
    context.fill();

图形变化

1、平移
.translate(x,y)
在x/y轴上分别平移
2、缩放
.scale(x,y)
x,y方向上分别缩放
3、旋转
.ratate(angle)
旋转angle角度

图形组合

.globalCompositeOperation=type

type：

    source-over（默认值）:在原有图形上绘制新图形

    destination-over:在原有图形下绘制新图形

    source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色

    destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色

    source-out:只显示新图形非交集部分

    destination-out:只显示原有图形非交集部分

    source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色

    destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色

    lighter:原有图形和新图形都显示，交集部分做颜色叠加

    xor:重叠部分不显示

    copy:只显示新图形

使用方法：

    //先画原图
    context.fillStyle = '#888';
    context.fillRect(0,0,100,100);
    //设置组合方式
    context.globalCompositeOperation = source-in;
    //再画新图形
    context.strokeStyle = '#111';
    context.strokeRect(50,50,100,100);

阴影

    context.shadowOffsetX = 10;//阴影的横向位移量（默认值为0）
    context.shadowOffsetY = 10;//阴影的纵向位移量（默认值为0）
    context.shadowColor = '#777';
    context.shadowBlur = 1.4;//阴影的模糊范围（值越大越模糊）
    context.fillStyle = '#00a1e9';
    context.fillRect(0,0,100,100);

保存文件

.toDataURL(MIME)

    //把图形转化为图片，并保存到新窗口
    var w = window.open(canvas.toDataURL("image/jpeg"),"smallwin","width=400,height-500");