将canvas添加到HTML中

<canvas>标签自身只有两个属性: width, height. 二者在没有指定的时候（标签内指定或者CSS指定）分别默认为300 pixels和150 pixels.

当然除此之外，canvas还有一个HTML的全局属性——id属性.

  
      
                
      
              
                            
    
     浏览器不支持canvas
        

书写canvas标签还有一点切记：canvas的结束标签不可以省略！

canvas的支持性

并不是每个浏览器都支持canvas标签，除了要检查浏览器的支持性外，还要设置好在不支持情况下canvas标签的替换内容（用以提示用户信息或者干脆建议用户将浏览器升级到最新版本）

下面是如何通过Javascript来检测浏览器是否支持canvas标签.

if(canvas.getContext){    var ctx = canvas.getContext('2d');    //continue drawing}else{    //canvas-unsupported code here}

最后的准备工作

准备工作到这里还没有结束，还必须使用 getContext(contextId) 来获取canvas标签的渲染上下文，通过这个上下文方可以调用各种绘画函数.我们不妨将渲染上下文想象成一个画笔，只有获得画笔我们才能进行绘画.

这里的contextId有两种取值："2d"和"experimental-webgl". 平时我暂且使用前者就好了，它会返回一个CanvasRenderingContext2D对象.

var canvas = document.getElementById('mycanvas');var ctx = canvas.getContext('2d');

开始绘画

canvas就是一个画布，标签的大小就是画布的大小。我们通过坐标来定位并在这张画布上绘画。绘画之前canvas是空的，画布以左上角为原点（0,0），向右和向下为正方向。

绘画之前，先蘸取画笔的颜色.

//蘸取画刷颜色context.fillStyle = "#ffffaa";

然后便可以进行绘画.

最简单的绘画从画文本开始，没错，我们把文字的当做最简单的图形.

//设置字体context.font = "20px Sans-Serif";//画一个文本context.fillText("Hello World!", 195, 190);

在canvas中只有一种图形我们可以直接通过调用函数就可以绘画出来，那就是矩形。这也就意味着，其余所有的图形，我们都需要通过绘制路径来拼成我们想要的图形，诸如三角形、梯形等等.

fillRect(x, y, width, height)  绘画实心矩形

strokeRect(x, y, width, height)  绘画空心矩形

clearRect(x, y, width, height)  擦除矩形范围内的所有的像素点

//画一个矩形context.fillRect(0, 0, 500, 300);//画一个文本context.fillText("Hello World!", 195, 190);//设置字体context.font = "20px Sans-Serif";//设置字体的垂直对齐方式context.textBaseline = "top";

控制台输出信息

console.log(message);