【js-11】如何使用canvas？

小课堂【武汉第157期】

分享人：王峰

1.背景介绍

        Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 -canvas。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

2.知识剖析

2.1 canvas的兼容性

       Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <canvas> 标签。

2.2 canvas的一些基本属性

       首先得说下width和height属性了，这是在canvas中必备的属性。

       width:画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。；默认值是 300。

       height:画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 width的一半。

<canvas id="myCanvas" width="300" height="300" >123</canvas>

      如何利用dom绘出一些简单的图

       在这里就需要用到一些属性：

       fillStyle:设置或返回用于填充绘画的颜色、渐变或模式。比如说绘制一个渐变色的矩形

       fillRect(x,y,width,height):从坐标(x,y)处绘制一个长度为width,宽度为height的填充矩形

demo1 制作渐变矩形

var a=document.getElementById("myCanvas");
var demo1=a.getContext("2d");
var my_gradient=demo1.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"red");
my_gradient.addColorStop(1,"blue");
demo1.fillStyle=my_gradient;
demo1.fillRect(20,20,150,100);

       strokeStyle:设置或返回用于笔触的颜色、渐变或模式。

       strokeRect(x,y,width,height):从坐标(x,y)处绘制一个长度为width,宽度为height的矩形边框

       line-width:表示边框宽度

       canvas里面还可以添加一些文本属性，比如说font,textAlign,textBaseline等等

demo2制作渐变矩形框

var b=document.getElementById("myCanvas");
var demo2=b.getContext("2d");

var gradient=demo2.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","#FFF");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
demo2.strokeStyle=gradient;
demo2.lineWidth=10;//边框宽度
demo2.strokeRect(20,20,150,100);

demo3 使用font, textAlign属性

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 在位置 150 创建蓝线
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();

ctx.font="15px Arial";

// 显示不同的 textAlign 值
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.font="40px Arial";
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);

2.3 canvas中的一些常用方法

1).lineTo():添加一个新点，然后在画布中创建从该点到最后指定点的线条

2).moveTo():把路径移动到画布中的指定点，不创建线条

3).stroke():绘制已定义的路径

demo4 canvas显示路径；

var canvas = document.getElementById('myCanvas'); //获取上下文对象，canvas很多常用方法都是基于这个对象实现的
var context = canvas.getContext("2d"); //目前参数只有2d
context.lineWidth = 5;  //线条宽度
context.moveTo(10,10);  //光标移到这点
context.lineTo(10,50);  //下一点坐标
context.lineTo(100,50);  //下一点坐标
  //下一点坐标
context.stroke();         //绘制路径

4).beginPath():起始一条路径，或重置当前路径

5).arc():创建弧/圆线

6).closePath():创建从当前点回到起始点的路径

demo5.绘制三角形

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

3.常见问题

      图像能不能放到canvas上？

4.解决方案

      可通过使用drawImage(image,x,y)就可以将图像放到canvas上，然后在canvas内设置宽高，就可以将图像放到画布中。

demo6.利用canvas渲染图片

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("img");

img.onload = function() {
    ctx.drawImage(img,0,0);
}

5.编码实战

6.扩展思考

       在上个demo中发现如果设置canvas标签css的width，height与在canvas中设置width，height不一样，这是为什么？

       高度和宽度是用于绘图的逻辑帆布尺寸和是不同的距离style.height和style.widthCSS属性。如果不设置CSS属性，画布的本征大小将被用作显示大小; 如果设置CSS属性，并且它们与画布尺寸不同，则您的内容将在浏览器中缩放。

7.参考文献

参考一：canvas中width,height与style width,style height的区别

参考二：HTML5 Canvas | 菜鸟教程

参考三：W3C HTML5标签

8.更多讨论

1.canvas能够使图像产生放大缩小效果吗？
2.canvas元素内部的width和height属性能使用rem单位吗？