【初识HTML5】(1) : 什么是画布

最新推荐文章于 2024-05-14 10:20:04 发布

Sam走起

最新推荐文章于 2024-05-14 10:20:04 发布

阅读量729

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/LetsgoSam/article/details/43701455

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

开宗明义：本人不是大牛，纯粹为了兴趣和大家分享，如果有错误的地方还望大牛不吝指正。

正如摄影是用光影作画，HTML5则是用代码作画。既然是作画，那我们就首先要聊聊HTML5里面最基础的东东：画布。因为本人不是大牛，无法给出很深奥的底层理论，那咱们就实际点，直接拿来用吧。

例1：

 <body>
 <canvas id='canvas' width='600' height='300'>
      Canvas not supported
</canvas>
    <script src='example.js'></script>
</body>
var canvas = document.getElementById('canvas'), （第一步）
context = canvas.getContext('2d');        <span style="white-space:pre">	</span>（第二步）
context.font = '38pt Arial';        <span style="white-space:pre">		</span>（第三步）
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 );

以上是非常简单的调用画布，并且作画的一个超级无敌例子，大家一目了然！canvas 是一个元素节点其它应该木有什么需要进一步描述了。那么我们总结一下：

1. 通过调用document.getElementById() 取得对Canvas的引用。

2. 通过调用getContext('2d') 来获取图形的CONTEXT，我们就理解成取得一只画笔吧！（大家注意2d, 那么可想而知肯定有3d ）

3. 用画笔开始作画。

OK let's move on!

这里大家要注意一点，画布大小和绘画平面大小不是一回事。我们再来举一个例子：

例2：

<!DOCTYPE html>
   <head>
     <title>画布大小: 500 x 500,
            绘画平面大小: 300 x 150</title>
<style>
         body {
            background: #dddddd;
}
#canvas {
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 500px;
            height: 500px;
         }
      </style>
   </head>
  <body>
    <canvas id='canvas'>
      Canvas not supported
</canvas>
    <script src='example.js'></script>
  </body>
</html>

OK ，跟第一个例子不同的是我们没有设置元素Canvas的宽高属性，而是用CSS进行控制。那么问题就来了，如果这样设置的话，画布大小就成了500px*500px, 那实际绘画平面的大小是多少呢？是300px*150px. 而如果我们按照例1中，给元素直接这是宽高属性，那么画布大小就等于绘画平面的大小。咦? 你肯定会问，我例2里并没有设定绘画平面大小，你怎么就说是300px*150px ？哦，那是因为这个是默认值。。。另外，我们要注意的是，当两个平面大小不一致的时候，默认情况下，绘画平面会自动缩放到画布的大小。 OK ，大家自己试试就可以了，理论很枯燥。OK? 我们推荐例1的设置方式，即直接给Canvas元素设置宽和高！！！便于控制效果。

在结束本文之前，我们再聊一下从 2d context 里面除了Canvas之外还有哪些属性呢，换言之，可以通过本文中context 直接调用的属性有哪些呢？

fillStyle font globalAlpha globalComposite-Operation lineCap lineWidth lineJoin miterLimit shadowBlur shadowColor shadowOffsetX shadowOffsetY strokeStyle textAlign textBaseline

我后面会跟大家一起慢慢学习的哟~~

That's it everybody!~~~~

Sam走起

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【初识HTML5】(1) : 什么是画布

开宗明义：本人不是大牛，纯粹为了兴趣和大家分享，如果有错误的地方还望大牛不吝指正。正如摄影是用光影作画，HTML5则是用代码作画。既然是作画，那我们就首先要聊聊HTML5里面最基础的东东：画布。因为本人不是大牛，无法给出很深奥的底层理论，那咱们就实际点，直接拿来用吧。
复制链接

扫一扫