什么是Canvas?
- HTML5的canvas元素使用JavaScript在网页上绘制图像
- canvas指的是画布，类似于windows的画图工具；拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
通过JavaScript来绘制
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>
JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
常用方法
获取上下文
- getContext('2d')：获取2D绘图上下文，用于绘制二维图形。
绘制矩形
- fillRect(x,y,width,height):绘制填充矩形
- strokeReact(x,y,width,height):绘制矩形边框
- clearRect(x,y,width,height):清除指定矩形区域的内容
路径操作
- beginPath():开始一条新路径
- closePath():关闭当前路径
- moveTo(x,y):将画笔移动到指定位置
- lineTo(x,y):从当前位置绘制直线到指定位置
- arc(x, y, radius, startAngle, endAngle, anticlockwise):绘制弧线或圆
样式和颜色
- fillStyle:设置填充颜色或样式
- strokeStyle:设置描边颜色或样式
变换
- translate(x,y):移动源点位置
- rotate(angle):旋转坐标系
- scale(x,y):缩放坐标系。
绘制文本
- fillText(text,x,y):绘制填充文本
- strokeText(text,x,y):绘制描边文本
图像处理
drawImage(image, dx, dy): 在指定位置绘制图像。getImageData(sx, sy, sw, sh): 获取图像数据。putImageData(imagedata, dx, dy): 将图像数据绘制到 canvas。
