本文摘自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();
|
阅读剩余部分
相关阅读 >>
HTML5边玩边学（二）-基础绘图
用js+HTML5实现的小游戏-- 捕鱼达人游戏
HTML5面向对象的游戏开发简单实例分享
HTML5与flash比较的详细介绍
HTML5加载时的等待动画效果制作
如何使用h5的dataset
HTML5 canvas如何绘制圆形？（代码实例）
HTML5中canvas的问题总结
HTML5 实现如何将两个矩形相互叠加
分享HTML5中10个经典的动画工具
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » Html5画布的详细介绍
