【Canvas学习教程】Canvas介绍

最新推荐文章于 2021-06-09 16:10:39 发布

xiaofancn

最新推荐文章于 2021-06-09 16:10:39 发布

阅读量170

点赞数

分类专栏： web前端文章标签： jQuery 浏览器 Ajax iOS Chrome ViewUI

本文链接：https://blog.csdn.net/xiaofancn/article/details/83909421

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

http://rockux.com/archives/%E3%80%90canvas%E5%AD%A6%E4%B9%A0%E6%95%99%E7%A8%8B%E3%80%91canvas%E4%BB%8B%E7%BB%8D

这一系列教程会带你快速认识Canvas，这是第一篇，RockUX先带你简单认识一下Canvas。Canvas是现代浏览器中内建的一个画图的方法，这篇文章中，RockUX会介绍如何访问Canvas元素，怎么画图形，变换颜色以及擦除。这个新技术非常的令人激动。

Canvas元素简介

当你听到Canvas的时候，你的第一反应应该是会想到HTML5的新元素。技术上来说，这只是一部分，从现在开始，我们先忘记那个吧。Canvas元素是浏览器新技术对外的一个窗口。

使用Canvas元素非常的简单，就是一个简单的HTML标签和给定的宽高。

<canvas height="500" width="500">
     <!--这里是备注内容-->
</canvas>

这个canvas当然什么都不会做，他只会在你的页面上放置一个透明的画布。Canvas里面写的内容会在浏览器不支持canvas的时候显示出来。

浏览器的支持

哪些浏览器支持Canvas，这个很重要。基本上现代浏览器都支持，包括最新版的IE。

Internet Explorer (9.0+)
Safari (3.0+)
Firefox (3.0+)
Chrome (3.0+)
Opera (10.0+)
iOS (1.0+)
Android (1.0+)

有意思的是，你在IE8及以下的版本中可以使用插件来让浏览器支持，这里查看。

Canvas的尺寸

学习Canvas很重要的一点就是要给他设置大小尺寸。使用CSS来设置宽高，会导致Canvas去调整适应那个尺寸。这背后的逻辑是：Canvas元素的渲染是调用浏览器的2D图形引擎来做的。无论怎样，只要知道用CSS来设置Canvas的宽高会有一些奇怪的问题。

2D图形渲染

上一节中提到的Canvas只是整个系统中的一部分。另外一部分就是2D渲染引擎，可以让你立即感受到你所做的的一个重要部分。再解释一下：当你使用Canvas的时候，你不是在Canvas上面直接画。相反你实际上是在一个2D图形环境上操作，只不过你是调用 JavaScript的API通过Canvas元素做到的。细节的东西可能在这里没什么用处，但是还是了解一下吧。

坐标系统

如果你之前使用过2D图形编程语言的话，那么你应该了解屏幕坐标系统。Canvas的2D图形引擎也没什么区别，也是用直角坐标系，原点坐标在左上角。X轴右移增大，Y轴下移增大。还是很直观的。大部分情况下，屏幕上的一像素相当于这个坐标系的一个单位。

访问2D图形引擎

调用图形接口，你需要使用JavaScript的API，你需要使用的是getContext方法：

<!DOCTYPE html> 
 <html> 
 <head> 
 <title>Canvas from scratch</title> 
 <meta charset="utf-8"> 
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
 
 <script> 
 $(document).ready(function() { 
 var canvas = document.getElementById("myCanvas"); 
 var ctx = canvas.getContext("2d"); 
 }); 
 </script> 
 </head> 
 
 <body> 
 <canvas id="myCanvas" width="500" height="500"> 
 <!-- Insert fallback content here --> 
 </canvas> 
 </body> 
 </html>

这里使用jQuery是为了用domready方法，你也可以用你自己喜欢的JS库，然后把这段代码放在文档底部就好了。

在调用getContext方法之后，变量ctx中就包含了2D图形引擎的引用，这意味着你就可以开始在Canvas上面画东西了。

画矩形

在获取2D图形引擎的引用之后，你就可以通过一些方法开始画图了。最基础的一个方法就是fillRect，这个方法会使用一定颜色（默认是黑色）画一个特定的矩形。

添加下面的代码：

ctx.fillRect(50,50,100,100);

这会在画布上画一个黑方块出来，距离画布边缘也有一定的距离。

xiaofancn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Canvas学习教程】Canvas介绍

http://rockux.com/archives/%E3%80%90canvas%E5%AD%A6%E4%B9%A0%E6%95%99%E7%A8%8B%E3%80%91canvas%E4%BB%8B%E7%BB%8D 这一系列教程会带你快速认识Canvas，这是第一篇，RockUX先带你简单认识一下Canvas。Canvas是现代浏览器中内建的一个画图的方法，这篇文章中，RockUX...
复制链接

扫一扫