canvas学习一之canvas的基本使用

来源：互联网发布：iphonex预约软件编辑：程序博客网时间：2024/06/04 01:21

一、canvas
1.canvas是html5中的一个标签，通过canvas的getContext得到上下文可以绘图等操作。canvas通过js进行API操作，可以得到想要的图形或动画。
2.html5中canvas有两套尺寸，第一个是元素本身的大小，在标签的属性里指定；还有一个是绘图表面的大小，标签属性和css都可以修改。默认情况下，canvas的元素大小和绘图表面都是300*150；当两者不一致时，浏览器会对画图表面进行缩放，使其符合元素的大小。举个例子如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>canvas基本使用</title>    <style type="text/css">        body {            background: #dddddd;         }         #canvas,#canvas1 {            margin: 20px;            padding: 20px;            background: #ffffff;            border: thin inset #aaaaaa;            width: 600px;            height: 300px;         }    </style></head><body>    <canvas id='canvas'>        不支持canvas    </canvas>    <canvas id="canvas1" width="600" height="300">        不支持canvas    </canvas></body><script type="text/javascript">    var canvas = document.getElementById('canvas'),    context = canvas.getContext('2d');    context.font = '38pt Arial';    context.fillStyle = 'cornflowerblue';    context.strokeStyle = 'blue';    context.fillText("Hello Canvas", canvas.width/2 - 150,                                 canvas.height/2 + 15);    context.strokeText("Hello Canvas", canvas.width/2 - 150,                                   canvas.height/2 + 15);    var canvas1 = document.getElementById('canvas1'),    context1 = canvas1.getContext('2d');    context1.font = '38pt Arial';    context1.fillStyle = 'cornflowerblue';    context1.strokeStyle = 'blue';    context1.fillText("Hello Canvas", canvas1.width/2 - 150,                                 canvas1.height/2 + 15);    context1.strokeText("Hello Canvas", canvas1.width/2 - 150,                                   canvas1.height/2 + 15);</script></html>

当没有在标签中指定宽高时，元素本身默认300*150，绘图表面也是300*150，当在css中修改宽高时，只修改元素本身大小，为600*300，绘图表面没有修改，还是300*150，两者不相等，于是浏览器会对画布进行缩放，使之符合大小。这里是横向竖向都放大2倍。

所以，当使用canvas时，最好在标签写好宽高，如果不可以，还可以使用js脚本给canvas加上宽高。

二、2个属性3个方法
2个属性：
width 画图表面的宽；
height 画图表面的高
3个方法：
getContext()：获得绘图对象，一般getContext(“2d”)获得2d绘图对象；
toDateURL(type,quality)：获得一个数据地址，这个是将canvas画布中的内容转化为图像，再将图像转为base64编码，最后得到的是一串字符串。type有image/png,image/jpeg两种，虽然base64有image/gif,但经我测试用火狐测试，不可以转成gif(?)。quality是图片的质量，从0-1.0的double数值；
toBlob(callback,type,args) Blob二进制大对象，将图片转成Blob.callback一个以获得的blob为参数的回调函数，type是图片类型，args图片质量；

将上面代码，修改一下，得到两个方法的照片：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>两种方法，将canvas转成图像</title>    <style type="text/css">        body {            background: #dddddd;         }         #canvas{            margin: 20px;            padding: 20px;            background: #ffffff;            border: thin inset #aaaaaa;            width: 600px;            height: 300px;         }    </style></head><body>    <canvas id='canvas' width="600" height="300">        不支持canvas    </canvas>    <img id="img"></body><script type="text/javascript">    var canvas = document.getElementById('canvas'),    context = canvas.getContext('2d');    context.font = '38pt Arial';    context.fillStyle = 'cornflowerblue';    context.strokeStyle = 'blue';    context.fillText("Hello Canvas", canvas.width/2 - 150,                                 canvas.height/2 + 15);    context.strokeText("Hello Canvas", canvas.width/2 - 150,                                   canvas.height/2 + 15);    var href = canvas.toDataURL("image/png", 0.1);    var image = document.getElementById("img");//静态获取img节点    image.src=href;    canvas.toBlob(function(blob){        var newImg = document.createElement("img"),//动态生成img节点        url = URL.createObjectURL(blob);        newImg.onload = function() {            URL.revokeObjectURL(url);//加载完成，释放url        };        newImg.src = url;        document.body.appendChild(newImg);    },"image/png",0.1)</script></html>

两者图像地址不一致：
toDataURL得到data:image/png;base64开头的字符串
toBlob得到blob:null/d871fc67-7a9a-41e1-82b2-9954eca7d198

toDataURL得到图像可以另存为保存到硬盘，但是blob不可以。

阅读全文

0 0