本文摘自PHP中文网,作者巴扎黑,侵删。
最近你开始在学习canvas,打算把学习canvas的整个学习过程当中的一些笔记与总结记录下来,如有什么不足之处还请大神们多多指出。
1. canvas介绍
Canvas元素的出现,可以说开启的Web世界绘制动画,图形的大门,其功能非常强大
canvas 元素是HTML5中功能最强大的元素,它的能力主要是通过Canvas中的Context(绘图上下文/绘图环境)对象表现出来的。该对象从canvas本身获取。
1 | var canvas = getElementById( 'canvas' ); var context = canvas.getContext( '2d' );
|
2. canvas的后备内容
Canvas元素之间包含的文本,这种文本称为 "后备内容",只有在浏览器不支持canvas元素时才会显示该文本内容
1 | <canvas>当前浏览器不支持canvas元素,请更换浏览器</canvas>
|
3. Canvas的尺寸
canvas元素时默认宽为300px、高为150px。
我们可以通过canvas的width,height属性去修改canvas的大小,我们也可通过CSS去修改canvas元素的大小。但是二者的修改是有区别的。
canvas实际上有两套尺寸:
一个是canvas元素的大小,一个是canvas绘图表面的大小。
当我们用canvas的属性width,height时实际上我们同时修改了元素的大小与绘图表面的大小
当我们用CSS来设定时,是会修改canvas元素的大小,不会影响绘图表面的大小,这时浏览器就会对绘图表面缩放,会出现我们不想得到的效果
width与height属性修改canvas尺寸大小时的表现
1 2 3 4 5 6 7 | <canvas id= "canvas" width= "600" height= "300" >当前浏览器不支持canvas,请更换浏览器</canvas>
<script type= "text/javascript" > var canvas = document.getElementById( 'canvas' ); var cxt = canvas.getContext( '2d' );
cxt.font = "38px Arial" ;
cxt.fillStyle = "#427ACC" ;
cxt.strokeStyle = "#00116A" ;
cxt.fillText( 'Hello Canvas' , canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText( 'Hello Canvas' , canvas.width/2 - 110, canvas.height/2 + 15);</script>
|
用CSS去修改canvas元素尺寸大小时的表现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>canvas尺寸问题</title>
<style>#canvas {
margin: 0 auto;
padding: 0;
width: 600px;
height: 300px;
border: 1px solid #ccc;
}</style>
</head>
<body>
<img src= "" alt= "" id= "dataImage" >
<canvas id= "canvas" >当前浏览器不支持canvas,请更换浏览器</canvas>
<script type= "text/javascript" > var canvas = document.getElementById( 'canvas' ); var cxt = canvas.getContext( '2d' );
cxt.font = "38px Arial" ;
cxt.fillStyle = "#427ACC" ;
cxt.strokeStyle = "#00116A" ;
cxt.fillText( 'Hello World' , canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText( 'Hello World' , canvas.width/2 - 110, canvas.height/2 + 15);</script>
</body>
</html>
|
所以我们在设置Canvas元素的大小时,最好不要使用CSS去设置,我们可以这么去设置
1 | <canvas id= "canvas" width= "600" height= "300" >当前浏览器不支持canvas,请更换浏览器</canvas>
|
或者
1 2 | <script type= "text/javascript" > var canvas = document.getElementById( 'canvas' );
canvas.width = '600' ;
|
4. canvas API
canvas元素并未提供很多API,它只提供了两个属性三个方法,而绘图功能的方法与属性全都是canvas的绘图环境(context)对象提供。
width:设置/获取canvas元素绘图表面的宽度,默认值为300。
height:设置/获取canvas元素绘图表面的高度,默认值为150。
getContext(): 返回canvas元素的绘图环境对象。
toDataURL(): 描述:返回一个data URI:会根据type指定的参数形式将canvas中的图片编码成一个UTF-16字符串的形式。
toBold(): 描述:创建Blob对象,用以展示canvas上的图片;这个图片文件可以被缓存或保存到本地,由User Agent( 用户代理端 )自行决定。
toDataURL():
type 可选参数
图片格式,默认为 image/png
encoderOptions 可选参数
当图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。
如果超出取值范围,将会使用默认值 0.92,默认分辨率为96dpi。
这里值得注意:
如果canvas的高度或者宽度为0时,会返回字符串 "data:,"
如果传入的类型不是 "image/png", 但是返回的值以 "data: image/png"开头,说明传入的类型不支持
Chrome支持“image/webp”类型
尽管在默认情况下canvas对象是一副位图,但是并不是HTML中的img元素,所以我们可以利用toDataURL方法创建一幅表示canvas的图像;也可以利用此方法创建和操作缓冲canvas。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>canvas尺寸问题</title>
<style>#canvas {
margin: 0 auto;
padding: 0;
display: none;
}</style>
</head>
<body>
<img src= "" alt= "" id= "dataImage" >
<canvas id= "canvas" >当前浏览器不支持canvas,请更换浏览器</canvas>
<script type= "text/javascript" > var canvas = document.getElementById( 'canvas' ); var dataImage = document.getElementById( 'dataImage' );
canvas.width = '600' ;
cxt.font = "38px Arial" ;
cxt.fillStyle = "#427ACC" ;
cxt.strokeStyle = "#00116A" ;
cxt.fillText( 'Hello World' , canvas.width/2 - 110, canvas.height/2 + 15);
cxt.strokeText( 'Hello World' , canvas.width/2 - 110, canvas.height/2 + 15); var dataUrl = canvas.toDataURL();
dataImage.src = dataUrl;</script>
</body>
</html>
|
toBold():
目前该方法只有Firefox与IE10浏览器支持
参考文章:
MDN Web 技术文档
以上就是Canvas学习系列一:初识canvas的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
h5 canvas实现圆形动态加载进度实例
高德地图+canvas画图结合实现一个小项目
html5 canvas实现简单的双缓冲
canvas制作旋转太极的动画
html5和js绘制图片到canvas的方法
html5 canvas标签的作用以及canvas标签的历史由来介绍
介绍html5+canvas调用手机拍照功能实现图片上传(下篇)
canvas中使用clip()函数裁剪方法
如何解决canvas绘图时遇到的跨域问题
用html创建canvas画布生成图片
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » Canvas学习系列一:初识canvas