html5画布基础

canvas 元素用于在网页上绘制图形。

 

什么是canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建画布：

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

---

阴影：
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.shadowBlur=10;----阴影的模糊级别 
ctx.shadowOffsetX=20;----阴影偏移像素 
ctx.shadowColor="black";---阴影 
ctx.fillStyle="blue"; 
ctx.fillRect(20,20,100,80);

---

线条：
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); ctx.beginPath(); 
ctx.lineWidth=10;----设置线条粗细 
ctx.lineCap="round";---round(圆形的结束帽)/square(正方形结束帽) 
ctx.moveTo(20,20); 
ctx.lineTo(20,200);
ctx.stroke();  
ctx.lineJoin="round";---当两条线条交汇时，创建边角类型（round-圆角/bevel-斜角/miter-尖角）
ctx.miterLimit=5;---设置或返回最大斜接长度。

---

矩形：

ctx.clearRect(20,20,100,50);---清空矩形
context.quadraticCurveTo(控制点x,控制点y,结束点x,结束点y);---二次贝塞尔曲线
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);---三次贝塞尔曲线