本文摘自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的页面结构需要注意那些方面
详解html5应用中accordion三种效果的探索
css3如何实现元素环绕中心点布局（代码示例）
html5 video怎么停止播放视频
详解h5非常重要的28个新特性,新技巧和新技术
分享一个html5电子杂志翻书特效代码
深入理解html5中的position
详细介绍html5的article和section的区别
详解html5的web存储与cookie的区别
关于html5你不得不知的事
更多相关阅读请进入《CanvasAPI》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » H5的CanvasAPI怎样绘制图形
