> 脚本语言 > >

Canvas学习系列（一）：初识canvas 2017-06-17 15:24　出处：清屏网　人气：　

最近你开始在学习canvas，打算把学习canvas的整个学习过程当中的一些笔记与总结记录下来，如有什么不足之处还请大神们多多指出。

1. 认识canvas

Canvas元素的出现，可以说开启的Web世界绘制动画，图形的大门，其功能非常强大

canvas 元素是HTML5中功能最强大的元素，它的能力主要是通过Canvas中的Context（绘图上下文/绘图环境）对象表现出来的。该对象从canvas本身获取。

获取context对象 var canvas = getElementById('canvas'); var context = canvas.getContext('2d'); 2. canvas的后备内容

Canvas元素之间包含的文本，这种文本称为 "后备内容"，只有在浏览器不支持canvas元素时才会显示该文本内容

后备内容

<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尺寸大小时的表现 <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元素尺寸大小时的表现

<style> #canvas { margin: 0 auto; padding: 0; width: 600px; height: 300px; border: 1px solid #ccc; } </style> <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 Canvas', canvas.width/2 - 110, canvas.height/2 + 15); cxt.strokeText('Hello Canvas', canvas.width/2 - 110, canvas.height/2 + 15); </script>

总结： 所以我们在设置Canvas元素的大小时，最好不要使用CSS去设置，我们可以这么去设置 <canvas id="canvas" width="600" height="300">当前浏览器不支持canvas，请更换浏览器</canvas>

或者

<script type="text/javascript"> var canvas = document.getElementById('canvas'); canvas.width = '600'; //canvas的属性取值为非负整数，所以不能带有px canvas.height = '300'; </script> 4. canvas API

canvas只提供了两个属性三个方法

属性 描述 

width canvas绘图表面的宽度 默认是为300

height canvas绘图表面的高度 默认是为150

getcontext()  该方法返回当前canvas的绘图环境对象

toDataUrl(type, quality) 返回一个数据地址，可是设置为imgd的src属性

toBold(callback, type, args...)  创建一个用于表示此canvas元素图像文件的Blod

总结： 目前还没有明确后面两个方法的用途

分享给小伙伴们：

本文标签： Canvas/">Canvas

相关文章

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。