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之间的浮点值，表示图片的质量

Canvas元素基本知识

canvas元素

Canvas使用示例

相关推荐