canvas基本用法（一）

一、定义

元素包含于HTML5中的，使用javaScript在网页上绘制图像

二、使用步骤

1. 创建canvas元素，在HTML5页面添加canvas元素
2. 设置画布宽度和高度

3. 通过Javascript绘制

    state.canvas = document.getElementById('tutorial');//获取元素的DOM对象
               state.context = state.canvas.getContext('2d');

 三、基本使用

 state.canvas = document.getElementById('tutorial');//获取元素的DOM对象
            state.context = state.canvas.getContext('2d');
            state.context.beginPath();//开始路径绘图
            state.context.moveTo(10,10);//起点
            state.context.lineTo(200,200)//画直线
            state.context.stroke()//通过线条来绘制图形轮廓。

 state.canvas = document.getElementById('tutorial');//获取元素的DOM对象
            state.context = state.canvas.getContext('2d');
            state.context.beginPath();//开始路径绘图
            state.context.moveTo(10,10);//起点
            state.context.lineTo(200,200)//画直线
            state.context.lineTo(100,200)//画直线
            state.context.stroke()//通过线条来绘制图形轮廓。

 state.canvas = document.getElementById('tutorial');//获取元素的DOM对象
            state.context = state.canvas.getContext('2d');
            state.context.beginPath();//开始路径绘图
            state.context.moveTo(10,10);//起点
            state.context.lineTo(200,200)//画直线
            state.context.lineTo(100,200)//画直线
            state.context.fill()//通过填充路径的内容区域生成实心的图形。

 state.canvas = document.getElementById('tutorial');//获取元素的DOM对象
            state.context = state.canvas.getContext('2d');
            state.context.beginPath();
            state.context.arc(85, 85, 50, 0, Math.PI * 2, true); // 绘制
            // arc(x, y, radius, startAngle, endAngle, anticlockwise)
            // 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

 state.canvas = document.getElementById('tutorial');//获取元素的DOM对象
            state.context = state.canvas.getContext('2d');
            state.context.beginPath();
            state.context.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
            state.context.moveTo(110, 75);//将笔触移动到指定的坐标x以及y上。
            state.context.arc(75, 75, 35, 0, Math.PI, false);   // 口(顺时针)
            state.context.moveTo(65, 65);
            state.context.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
            state.context.moveTo(65, 65);
            state.context.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
            state.context.stroke();