第十日
此刻我的思想真的枯竭了
用HTML5的Canvas画简单图形
HTML5中用的最多的就是Canvas了，从最简单的图形绘制到高级游戏，都离不开Canvas。
因为HTML5很火，借朋友的光，看了看他买的一本HTML5初级入门书，做了如下入门的Canvas画图。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas Test</title>
</head>
<body>
<canvas style="border:1px solid #c3c3c3;" id="myCanvas" width="800" height="600" >
Your browser does not support the canvas element.<!--这句是为了不支持HTML5的浏览器准备的-->
</canvas>
<script type="text/javascript">
//经过测试，这里的语句严格区分大小写，如果你发现什么在浏览器上什么也不显示，说不定就是应为大小写
var c = document.querySelector('#myCanvas');//通过ID获得Canvas，
//这里用的是querySelector()，是HTML5的语句
//你也可以继续用getElementById()，效果一样
var cxt = c.getContext('2d');//告诉Canvas这是2D绘图
cxt.fillStyle = "#FF0000";//把要填充的颜色设为红色
cxt.fillRect(0,0,150,75);//如果你想画一个矩形，就是用fillRect()
cxt.moveTo(150,10);//设置绘图起始坐标
cxt.lineTo(150,150);//画线
cxt.lineTo(300,150);
cxt.lineTo(300,300);
cxt.stroke();//其实在这句之前的全部代码都是告诉浏览器我要画什么样的图形，
//而你只有写上这句，才能看到你想要的图形
cxt.fillStyle="#00ffff";
cxt.beginPath();//开始绘制路径
cxt.arc(300,300,20,0,Math.PI*2,true);//这句是画圆，
//arc的 参数 依次为：arc(in float x,in float y,in float radius,in float startAngle,in float endAngle,in boolean anticlockwise)
//x,y代表要圆心坐标；radius：半径；startAngle，endAngle起始的角度和结束的角度，改变这个可以画弧；anticlockwise：是否使用逆时针方向绘图。
cxt.closePath();//结束绘制
cxt.fill();//填充上面设置的#00ffff颜色
</script>
</body>
</html>
上面的栗子只是用到了 绘制直线，矩形，圆以及设置颜色，填充
出了上面的函数，context对象还提供很多方法
列举一些 ：
clecrRect(left,top,width,height)清除制定矩形区域。
fillRect(left,top,width,height)绘制矩形，并以fillStyle填充。
fillText（text,x,y）绘制文字。
strokeRect(left,top,width,height)绘制矩形，并以strokeStyle绘制边界。
beginPath():开启路径的绘制,重置path为初始状态。
closePath():绘制路径path结束，它会绘制一个闭合的区间，添加一条起始位置到当前坐标的闭合曲线。
moveTo(x，y)：设置绘图起始坐标。
lineTo(x，y);绘制从当前起始位置到坐标x，y直线。
fill()，stroke()，clip()：在完成绘制的最后的填充和边界轮廓，剪辑区域。
arc()：绘制弧,圆心位置、起始角度、终止角度来指定圆弧的位置和大小。
rect():矩形路径。
drawImage（Imag img）：绘制图片。
quadraticCurveTo():二次样条曲线路径,参数两个控制点。
bezierCurveTo()：贝塞尔曲线，参数三个控制点。
除了这些，还有很多绘制的方法。当然还有变换，变换更为强大。
不过我还没有学习到，所以暂时只能用到绘制。
原创文章，转载请注明： 转载自第十日
本文链接地址: 用HTML5的Canvas画简单图形
Tags: Canvas, HTML5, JavaScript
强大！