本文摘自PHP中文网，作者php中世界最好的语言，侵删。
这次给大家带来H5的CanvasAPI怎样绘制图形，怎么用Canvas制作图形？Canvas制作图形的注意事项有哪些，下面就是实战案例，一起来看一下。Canvas元素
以下html代码定义了一个canvas元素。
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html>
<html>
<head>
<title>Canvas快速入门</title>
<meta charset="utf-8"/>
</head>
<body>
<div>
<canvas id="mainCanvas" width="640" height="480"></canvas>
</div>
</body>
</html>
|
通过以下Javascript语句访问canvas元素：
1 2 3 4 5 6 7 8 9 10 11 | //DOM写法
window.onload = function () {
var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
};
//jQuery写法
$(document).ready(function () {
var canvas = $("#mainCanvas");
var context = canvas.get(0).getContext("2d");
});
//接下来就可以调用context的方法来调用绘图API
|
2. 基础API
2.1 坐标系统
Canvas 2D渲染上下文采用平面笛卡尔坐标系统，左上角为原点(0,0)，坐标系统的1个单位相当于屏幕的1个像素。
阅读剩余部分
相关阅读 >>
html5调用摄像头的示例代码分享
图文详解如何用canvas画实心圆和空心圆
h5+webworkers多线程开发使用详解
html5如何正确设置视频的宽高
html5 video如何实现实时监测当前播放时间（代码）
关于使用html5进行svg矢量图形绘制的代码
详解html5拖放功能实例
html5 浏览器支持
h5中history api 对web应用的影响
详解html5预测取代本地app将成为可能
更多相关阅读请进入《CanvasAPI》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » H5的CanvasAPI怎样绘制图形
