本文摘自PHP中文网，作者零下一度，侵删。
这篇文章主要介绍了Html5画布,canvas 元素用于在网页上绘制图形。有兴趣的小伙伴可以一起来了解一下关于HTML5画布canvas的功能
一、画布的使用
1、首先创建一个画布（canvas）
1 | <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid #000000”></canvas>
|
2、使用JavaScript来绘制图像
1 2 3 4 5 6 | <script>
Var c=document.getElementByID(“myCanvas”)
Var ctx=c.getContext(“2d”);
Cxt.fillStyle=”#FF0000”;
Cxt.fillRect(0,0,150,75);
</script>
|
3、Canvas - 路径
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
1，Canvas的定义
1 | <canvas id="myCanvas" width="400" height="200">
|
默认<canvas>画布在页面上会显示一块空白、无边框的矩形。为了让其显示轮廓，通过定义样式规则给其添加一个虚线边框：
1 2 3 | canvas {
border: 1px dashed black;
}
|
2，获取Canvas的上下文对象
要完成绘图任务，首先我们要拿到<canvas>对象，接着取得其二维绘图上下文。
下面样例演示在页面加载完毕时获取绘图上下文：
1 2 3 4 5 6 7 8 | <script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
}
</script>
|
3，画直线
（1）下面绘制一条起点是(50,50)，终点是(150,150)的直线线条
1 2 3 | context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();
|
阅读剩余部分
相关阅读 >>
h5开发视频遇到的问题及解决方案
h5表单验证失败该怎样提示
如何用HTML5中的canvas绘制渐变矩形
HTML5本地存储之webstorage介绍
HTML5 canvas基本绘图之绘制线条
什么是websocket？解析h5中的websocket
h5中history api 对web应用的影响
HTML5中div和section以及article的区别分析
HTML5 history模式是什么
css3如何实现元素环绕中心点布局（代码示例）
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » Html5画布的详细介绍
