李洋学习笔记-Canvas基础

单词总结

stroke 描边,笔画
rect(rectangular) 矩形  
canvas 画布  
gradient 渐变  
linearGradient 线性渐变
bevel 斜角
miter 斜接  
curve 曲线  
measure 测量
arc 弧线
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>