Canvas元素基本知识

最新推荐文章于 2024-03-02 13:59:14 发布

yangnianbing110

最新推荐文章于 2024-03-02 13:59:14 发布

阅读量1.3k

点赞数

分类专栏：学习笔记 html5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/yangnianbing110/article/details/46552409

版权

学习笔记同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

html5

8 篇文章 0 订阅

订阅专栏

canvas元素

如果说到在网页中绘制图形以及动画，大部分人会想到flash，但是是要想在浏览器中运行flash的画，还必须装额外的插件，而且不是所有的浏览器都会支持flash。在html5中引入了标签canvas，让我们不用装任何其他的插件，就可以在实现html5的浏览器中实现图形绘制。

Canvas使用示例

如何使用canvas元素，我们先来看一个简单的例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background-color: #dddddd;
        }
        #canvas{
            margin: 10px;
            padding: 10px;
            background: #ffffff;
            border:thin inset #aaaaaa;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="300">
        canvas not supported
    </canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d");

        context.font = '38pt Arial';
        context.fillStyle = 'cornflowerblue';
        context.strokeStyle = 'blue';
        context.strokeText("Hello canvas", canvas.width/2 - 150,  canvas.height/2 + 15);

    </script>
</body>
</html>

可以看到对待canvas标签可以像对待其他的任何标准的html标签一样，通过js能够与其很好的交互，也能通过css给canvas设置样式。

通过document.getElementById()获取到canvas元素。
通过canvas对象的getContext(“2d”)方法获取绘图环境，这个绘图环境是什么后面会详细介绍
使用绘图环境在canvas元素上面进行图形绘制

通过绘图环境，我们设置了font,fillStyle, stokeStyle等属性，然后对文本进行填充以及描边，strokeText()方法使用strokeStyle属性描述指定文字的轮廓线，fillText()方法使用fillStype属性来填充字符

canvas元素只是一个画布，并没有提供很多的api，只有三个元素以及两个方法。
* width：画布的宽度
* height:画布的高度
* getContext()获取绘图环境，前面的例子看到绘制图形的时候都是通过这个绘图环境提供的api来实现的，如果canvas元素是画布，那么绘图环境就相当于画笔以及颜料
* toDataUrl(type, quality)返回一个二进制数据，可以作为img元素的src值，quality为0~1之间的浮点值，表示图片的质量