canvas使用技巧大全

1.基本知识

1.1 canvas的基本知识

canvas元素的大小和绘图表面的大小
canvas绘图环境及保存和回复
基本绘制操作
事件处理

1.1.1 canvas 基本知识

canvas是html5元素中功能最强大的一个。这种强大的能力是通过canvas的context对象表现出来的。它提供一套完成的绘图功能，从而使我们可以使用javascript可以操作他们。

我们能用Canvas做些什么?

游戏，毫无疑问，相比flash技术，html5基于web的图像显示更加立体，精巧。流行的游戏引擎cocos2d-js、Egret都基于html5的canvas
图表制作:图表制作时常被人们忽略,但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/CSS完成图标制作,但Ohad认为大家完全可以用Canvas来实现。当然,使用SVG(可缩放矢量图形)来完成图表制作也是非常好的方法。
banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过。
模拟器:Ohad认为,无论从视觉效果还是核心功能方面来说,模拟器产品可以完全由JavaScript来实现。
远程计算机控制:Canvas可以让开发者更好地实现基于Web的数据传输,构建一个完美的可视化控制界面。
字体设计:对于字体的自定义渲染将完全可以基于Web,使用HTML5技术进行实现。
图形编辑器:Ohad预测,图形编辑器将能够100%基于Web实现。
其他可嵌入网站的内容:类似图表、音频、视频,还有许多元素能够更好地与Web融合,并且不需要任何插件。Ohad呼吁大家继续挖掘Canvas的潜力,运用HTML5技术创造更多价值。

先看一个基础的例子：

   <canvas id="canvas" width="600" height="500">
        Canvas not supported
    </canvas>
    
    <script>
        var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d');  // 获取2d上下文
        ctx.font = '38pt Arial'; // 设置字体
        ctx.fillStyle = 'red';  // 设置填充颜色
        ctx.strokeStyle = 'blue'; // 设置描边颜色
        // 文字描边
        ctx.fillText('hello word', canvas.width / 2 - 150, canvas.height / 2 + 50);    
         // 绘制文字 填充
        ctx.strokeText('hello word', canvas.width / 2 - 150, canvas.height / 2);
    </script>

效果入下

使用document.getElementById()方法获取只想canvas的引用
在canvas上调用getContext('2d'),获取绘图上下文，2d必须小写。
然后使用绘图api，具体的绘制方法将在后续介绍。

<canvas id="canvas"> Canvas not supported </canvas>

这句话的意思，在不支持canvas元素的浏览器会显示这句话，支持的浏览器则不会显示。

注意：

设置canvas的width和height属性时虽然都支持px为单位的后缀，但规范要求使用非负的整数。
默认的canvas使用框高的，300 ×150个屏幕像素。可以通过制定canvas的width,height指定canvas大小，也可以通过css指定，但css指定大小会出现意外的情况，下面会具体说明。

canvas元素的大小和绘图表面的大小

我们在设置canvas宽搞得时候可以设置width 和 height

<canvas id="canvas" width="300" height="150"></canvas>

也可以设置css的width 和 height

canvas{width:600px;height:300px}

但画出来实际大小确实怪异的，实际上canvas有两个大小。一个是元素大小，另一个是绘图尺寸大小。

在指定canvas属性width和height的时候，canvas大小和绘图大小相同。绘制不会出现任何问题。

当canvas大小不符合其绘图大小时，浏览器就会对图片进行缩放，适合符合元素大小。注意：通过width和height属性指定canvas大小是个好主意，如果使用css来修改元素大小，同时又没有指定元素canvas的height和width属性值时，浏览器会缩放后者，使之符合前者大小。可能会导致奇怪的后果

、、、、待更新

8大核心要点：我们能用HTML5 Canvas做什么？