web 画布

在web页面增加画布

<canvas id="lookwhatIdrew" width="600" height="200"></canvas>

• canvas（画布）元素是一个正常的HTML元素，首先是一个开始<canvas>标记。
• 我们增加一个id来标识这个画布，稍后会看到如何使用这个id
• width属性定义它在web页面中水平方向占多少个像素。
• height定义它所占的页面垂直区域。

画布四周可以环绕HTML，画布与其他元素没有什么不同。

• 一个页面可以有多个画布，你可以为每个画布指定一个唯一的id,这样能够将它们作为唯一的画布来进行绘制。

---

在画布上绘制四方形

我们使用javascript在画布上面绘制一个x=10 y=10 长宽都是100px的图片

<script>
    window.onload = function() {
       var canvas = document.getElementById("lookwhatIdrew");
       var context = canvas.getContext("2d");
       context.fillRect(10,10,100,100);
    };
</script>

• 首先需要通过画布的id获取画布的引用。
• 我们需要通过画布的一个“2d”上下文来具体绘制
• 矩形的填充默认是黑色。通过fillRect来进行填充。可以通过fillStyle属性改变默认填充色。context.fillStyle = "lightblue"

如果使用代码来检测浏览器是否支持画布，需要使用canvas对象中是否存在getContext方法，如下；

var convas = document.getElementById("lookwhatIdrew");
if(canvas.getContext) {
    //you have canvas
}else {
    //sorry no canvas API support
}

注意：我们并没有调用getContext这个方法，只是查看它是否有值，所以不使用canvas.getContext().

如果没有提供画布元素支持，你可以向用户发送一个有好的消息，告诉他们应该升级。浏览器看到一个它不认识的元素，默认行为就是显示其中包含的文本。所以，不支持画布的浏览器看到<canvas>元素时，它就显示其中的文本，如下：

<canvas id="lookwhatIdrew" width="600" height="200">
  Hey you, you, upgrade your browser !!
</canvas>

---

在画布上绘制三角形

1. 使用beginPath方法告诉画布我们要开始一个新路径

context.beginPath();

2. 使用moveTo方法把“铅笔”移动到画布上的一个指定点，可以认为把铅笔放在这一点上。

context.moveTo(100, 150);

3. lineTo方法描述路径，从铅笔的当前位置描到画布上的另一个点。

context.lineTo(250, 70);

4. 我们已经完成三角形的第一条边，现在再来画第二条线。

context.lineTo(125, 30);

5. 使用closePath方法闭合路径。

context.closePath();

6. 设置线宽

context.lineWidth  = 5;

7. 用线描述路径

context.stroke();

8 .设置颜色用来红色填充三角形

context.fillStyle = "red";

9 .填充三角形

context.fill();

---

在画布上绘制圆形

1. 使用beginPath方法告诉画布我们要开始一个新路径

context.beginPath();

2. 使用arc方法来绘制圆形

context.arc(150, 150, 50, 0, 2 *Math.PI, true);

3 .设置颜色用来红色填充圆形

context.fillStyle = "red";

4 .填充圆形

context.fill();

下面深入分析arc方法，查看它的各个参数：

context.arc(x, y, radius, startAngle, endAngle, direction);

• x和y参数确定圆心在画布上的位置。
• radius这个参数指定圆的半径(宽度的1/2)
• startAngle,endAngle表示弧的起始角和终止角来确定圆上的起点和终点。
• diretion是布尔值，如果为true，就表示逆时针画弧。如果为false，则表示顺时针画弧。而角度是从右边中间位置开始算0度，所以这个需要注意。

使用度转化为弧度封装的方法

function degreesToRadians(degrees) {
    return (degrees * Math.PI)/180;
}

---

在画布中添加文本

context = canvas.getContext("2d");
context.fillStyle = "red";
context.font = "bold 1em sans-serif";
context.textAlign = "left";
context.fillText = ("Hello world", 20, 40); //20 40是开始点

---

在画布中添加图片

1. 首先需要一张图片，要把这个图像放在画布上，需要一个javaScript image对象。可以通过下面方法得到：

var twitterBird = new Image();
twitterBird.src = "twitterBird.png";

2. 使用一个上下文方法在画布上绘制这个图像，通过方法drawImage方法

context.drawImage(twitterBird, 20, 120, 70, 70);
//20 ,20 是指定的x y 的位置
// 70 ,70是宽和高

3. 关于图像还有一点需要知道，图像并不总会立即加载，所以在绘制图像之前需要确保图像已经完全加载。要实现一个onload处理程序：

twitterBird.onload = function() {
    context.drawImage(twitterBird, 20, 120, 70, 70);
}

---

把画布转化为图片

function makeImage() {
    var canvas = document.getElementById("tshirtCanvas");
    canvas.onclick = function() {
       window.location = canvase.toDataURL("image/png");  
    };
}

知行办公，专业移动办公平台https://zx.naton.cn/
【总监】十二春秋之，3483099@qq.com；
【Master】zelo，616701261@qq.com；
【运营】运维艄公，897221533@qq.com；****
【产品设计】流浪猫，364994559@qq.com；
【体验设计】兜兜，2435632247@qq.com；
【iOS】淘码小工，492395860@qq.com；iMcG33K，imcg33k@gmail.com；
【Android】人猿居士，1059604515@qq.com；思路的顿悟，1217022114@qq.com；
【java】首席工程师MR_W，feixue300@qq.com；
【测试】土镜问道，847071279@qq.com；
【数据】fox009521，42151960@qq.com；