H5介绍和vanvas画布学习
从前端技术角度把互联网的发展分为三个阶段：
第一阶段是以Web1.0为主的网络阶段，前端主流技术是HTNL和CSS；
第二阶段是Web2.0的Ajax应用阶段，热门技术是JavaScript/DOM/异步数据请求；
第三阶段是HTML5+CSS3阶段，这将是一个崭新的时代。
HTML5相比之前有许多新特性，是开发更简洁，效率更高。
lHTML5 约等于 HTML+CSS3+ JAVASCRIPT API；
支持HTML5的浏览器有:目前Firefox、Chrom、Opera、Safari（版本4以上）、Internet Explorer 9。 你必须使用这些浏览器，才能浏览HTML5页面
HTML5相对于前几版新增功能
1.增加 <canvas> 标签
2.增加 <header> 和 <footer> 标签
3.增加音频和视频嵌入功能 <video> 和 <audio>
4.增加离线存储功能.
5.高级应用体验案例:语言识别,图像识别,html5游戏
6.支持更加强大的css3 (参考页面)
7.增加拖放，跨文档消息，浏览器历史管理等
8.增强各大浏览器的兼容性.
现在开始学习canvas画布的相关知识
HTML5-canvas画布坐标体系
下图说明了canvas 画布坐标系。坐标原点位于左上角，以像素为单位。像素是计算机屏幕上最小的显示单位。在canvas 画布坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素；第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。
坐标体系-像素
计算机显示器的分辨率是800×600，表示计算机屏幕上的每一行由800个点组成，共有600行，整个计算机屏幕共有480 000个像素。
下面直接写H5代码，如果想要先学习H5之前的版本，请到本站学习笔记中PHP学习笔记下学习html的知识。
可以使用的编辑器有很多，如notepad，editplus,eclipse等等，也可以用windows自带的记事本（所有的代码全部自己敲出来，这个刚开始学习很好，很练你的耐力），这里我使用的并且推荐的是HBuilder，它可以实时预览，就是边敲代码，边看效果，很方便，随时看到自己做的效果。HBuilder如果自己下不好，可以给我留言，我会给你发送过去。
通过判断getContext函数是否存在来判断你的浏览器是否支持canvas元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas画布</title>
</head>
<body>
<!-- 画布的绘图区域-->
<canvas id="myCanvas" style="border: 5px solid red;" width="400" height="200">
您的浏览器不支持canvas元素，请更新或更换其他浏览器。
</canvas>
<!--判断浏览器是否支持canvas-->
<script type="text/javascript">
<!-- 获取canvas元素-->
var c=document.getElementById("myCanvas");
if(c.getContext){
alert(您的浏览器支持canvas!);
}else{
alert(您的浏览器不支持canvas!);
}
</script>
</body>
</html>
画出直线，如下主要代码
<script type="text/javascript">
var c=document.getElementById("myCanvas");
<!-- 获取绘制2D的上下文环境-->
var context=c.getContext("2d");
context.moveTo(50,25);<!-- 建立新的子路径，开始点的坐标-->
context.lineTo(200,100);<!--从开始点到规定点的一条直线，结束点的坐标-->
context.stroke();<!-- 沿着上面的路径绘制出一条直线-->
</script>
如下图：
画出实心矩形
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
//fill填充fillRect填充区域
context.fillStyle="#FF00FF";
context.fillRect(10,10,200,100);
//颜色表示方法
// context.fillStyle="#FF0000";//十六进制
// context.fillStyle="red";//颜色名称
// context.fillStyle="rgb(250,0,0)";//rgb函数
// context.fillStyle="rgb(100%,0%,0%)";//rgb百分比值
// context.fillStyle="rgba(255,0,0,1)";//rgba半透明值
</script>
如下图所示：
画出空心矩形
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
//stroke是轮廓，strokeText轮廓或线条
context.strokeStyle="#00FF00"; //设置颜色
context.strokeRect(10,10,100,50);
</script>
如图所示：
画出圆形
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="#FF00FF";
context.beginPath();//开始绘制
context.arc(100,75,50,0,Math.PI*2,true);
//100，75为圆心坐标，50是半径长度，0是开始角度，Math.PI*2是结束角度，true是顺时针绘制
context.closePath();//封闭起点和终点
context.fill(); //填充整个图形
</script>
如下图：
画出弧线
<!--圆形举例，弧线-->
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
for(var i=0;i<15;i++){
context.fillStyle="#FF00FF";
context.beginPath();//开始绘制
context.arc(0,200,i*10,0,Math.PI*3/2,true);
//context.closePath();
context.stroke();
// context.closePath();//封闭起点和终点
// context.fill(); //填充整个图形
}
</script>
如下图：
画出填充三角形
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="red";
context.beginPath();
context.moveTo(25,25);
context.lineTo(100,25);
context.lineTo(30,150);
//context.closePath();
context.fill();
</script>
如下图：
画出空心三角形
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.strokeStyle="green";
context.beginPath();
context.moveTo(25,25);
context.lineTo(100,25);
context.lineTo(30,150);
context.closePath();
context.stroke();
</script>
如下图：
清空画布
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.strokeStyle="green";
context.beginPath();
context.moveTo(25,25);
context.lineTo(100,25);
context.lineTo(30,150);
context.closePath();
context.stroke();
function clearMap(){
context.clearRect(0,0,100,100); //清空·部分·
//context.clearRect(0,0,400,200);//清空全部
}
</script>
<br />
<input name="clear" type="button" value="清空画布" onclick="clearMap();" />
如下图（没清空之前）：
点击清空画布按钮：
画出二次方贝塞尔曲线
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.strokeStyle="dark";
context.beginPath();
context.moveTo(0,200);
context.quadraticCurveTo(75,50,300,200);
context.stroke();
context.globalCompositeOperation="source-over";
//为了画出控制线
context.strokeStyle="#ff00ff";
context.beginPath();
context.moveTo(75,50);//控制点
context.lineTo(0,200);//开始点
context.moveTo(75,50);//控制点
context.lineTo(300,200);//结束点
context.stroke();
</script>
如下图:
画出三次方贝塞尔曲线
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.strokeStyle="dark";
context.beginPath();
context.moveTo(0,200);
context.bezierCurveTo(25,50,75,50,300,200);
context.stroke();
context.globalCompositeOperation="source-over";
//为了画出控制线
context.strokeStyle="#ff00ff";
context.beginPath();
context.moveTo(25,50);//控制点
context.lineTo(0,200);//开始点
context.moveTo(75,50);//控制点
context.lineTo(300,200);//结束点
context.stroke();
</script>
如下图：
保存与恢复canvas状态
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
// 开始绘制矩形。
context.fillStyle="#ff00ff";
context.strokeStyle="blue";
context.fillRect(20,20,100,100);
context.strokeRect(20,20,100,100);
context.fill();
context.stroke();
// 保存当前Canvas状态。
context.save();
//绘制另外一个矩形。
context.fillStyle="#ff0000";
context.strokeStyle="green";
context.fillRect(140,20,100,100);
context.strokeRect(140,20,100,100);
context.fill();
context.stroke();
// 恢复第一个矩形的状态。
context.restore(); //如果把这个注释，会按照第二个图形的方式显示
// 绘制两个矩形。
context.fillRect(20,140,50,50);
context.strokeRect(80,140,50,50);
</script>
如下图：不注释context.restore(); 按照第一个图形的方式显示
注释context.restore(); 按照第二个图形的方式显示
上面就是对canvas画出各种图形的介绍，之后的文章会有绘制文字和图像等知识，如果你对canvas感兴趣，快和我一起愉快的玩耍吧！！！
有任何问题随时与我练习！
Latest posts by zchao (see all)
- Auraでアクションボタン作成して画面のチェックボックス項目一括処理 - 2021年4月12日
- デフォルト項目値を含むレコード作成実例説明(defaultFieldValues) - 2021年1月9日
- Salesforce のノーコード・ローコード開発 - 2020年12月31日
