1.什么是Canvas？
- canvas 是 HTML5 提供的一个用于展示绘图效果的标签
- HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
- 画布是一个矩形区域，可以控制其每一像素。
- canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2.创建Canvas标签
<canvas id="myCanvas" width="600" height="400"></canvas>
- 此标签只能展示绘图内容，不能进行绘图。
- canvas的兼容性， IE9及其以上版本的浏览器，才支持canvas标签 。
3.通过JavaScript来绘制
- canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
3.1 画一个简单的红色矩形
<script type="text/javascript">
var c=document.getElementById("myCanvas"); //使用id来寻找canvas元素
var cxt=c.getContext("2d"); //创建Context对象
/*下面两行绘制红色矩形*/
cxt.fillStyle="#FF0000";
cxt.fillRect=(0,0,150,75);
</script>
效果如图
- getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
- fillStyle() 设置或返回用于填充绘画的颜色、渐变或模式，将其染成红色。
- fillRect() 方法绘制“被填充”的矩形，规定了形状、位置和尺寸。
4.一些Canvas的方法和属性
5.浏览器支持
-
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。
-
Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
简单的总结：
在朋友的推荐下今天是第一次在这里写这种文章，这大概只能算是一篇小小的学习记录，并没有什么技术含量，我的文笔很差，写不出来很华丽的东西，但是偶尔写写，大概也对自己知识积累写作提升有很大帮助吧。
通过对canvas的学习，知道了它好像是个不得了的东西，今天只是初步的了解了它的一些基础知识，不懂的东西还很多，接下来也会继续学习提升自己。
网友评论