这篇博客介绍了HTML5中canvas元素的基本使用，包括设置边框、获取二维绘图上下文、绘制矩形的方法如clearRect、fillRect和strokeRect。还讲解了画布的绘制状态配置，如fillStyle、lineJoin和strokeStyle，并介绍了lineJoin的三种类型。最后，文章探讨了如何创建和使用线性和径向渐变来丰富图形效果。
html５定义了canvas元素作为原生的flash代替，但是想要代替flash还需要一段时间。canvas元素是一种可供绘图的平面，这里实用JavaScript对它进行配置和操作。
这篇文章的内容来自于《html5 权威指南》
1. 开始实用canvas元素
<!DOCTYPE HTML>
<html>
<head>
<title>canvas</title>
<style>
canvas {
border: medium double black;
margin: 4px
}
</style>
</head>
<body>
<canvas width="500" height="200">
Your browser doesn't support the <code>canvas</code> element
</canvas>
</body>
</html>这个例子中给canvas元素应用了一个样式绘制边框，这样描述的操作与画布左边之间的关系始终清晰。
canvas元素里的内容会在浏览器不支持此元素时作为备用内容显示。
所以这个例子你将会看到空白的边框，因为该浏览器支持canvas元素。
2. 获取画布的上下文
为了在canvas元素上绘图，需要获取一个上下文对象，这个对象会开发针对特定图形样式的绘图函数。
为了获取二维上下文对象，需要给getContext方法传递参数2d.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
canv
最低0.47元/天 解锁文章
扫一扫
1195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
