Canvas基础操作

单词总结

stroke 描边,笔画 rect(rectangular) 矩形
canvas 画布
gradient 渐变
linearGradient 线性渐变 bevel 斜角 miter 斜接
curve 曲线
measure 测量 quadratic 二次的 angle 角度 radius 半径 radial 径向的，发射状的 anticlockwise 逆时针 gravity 重力 invert 反转 blur 模糊 offset 偏移
clip 裁剪

简介

Canvas （画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图

Canvas与SVG的比较

1. Canvas 是一个基于 JavaScript 的绘图 API，而 SVG 使用一个 XML 文档来描述绘图。
2. Canvas不支持事件处理器，SVG支持事件处理器
3. Canvas适合图像密集型的游戏，其中的许多对象会被频繁重绘,SVG最适合带有大型渲染区域的应用程序

Canvas的简单应用

<!--  Canvas对象只有两个属性—— width和height, id属性并不是<canvas>元素所特有的而是全局属性  -->
<canvas id="myCanvas" width="150" height="150"></canvas>   

<script type="application/javascript">
  var canvas = document.getElementById("myCanvas"); //获取canvas元素
  var ctx = canvas.getContext("2d");  //getContext方法指定参数2d，表示该canvas对象用于生成2D图案
  ctx.beginPath(); // 开始路径
  ctx.moveTo(20, 20); // 路径起点，坐标为(20,20)
  ctx.lineTo(200, 20); // 绘制到(200,20)的线
  ctx.lineWidth = 1.0; // 设置线宽
  ctx.strokeStyle = "#CC0000"; // 设置线的颜色
  ctx.stroke(); // 对线进行着色，使线可见
}
</script>