调用HTML5的Canvas API绘制图形的快速入门指南

2019-01-28 14:43:21刘景俊
  1. //示例    context.save();   
  2. context.globalAlpha = 0.5;    context.fillRect(0, 0, 200, 100);   
  3. context.restore();  

3.3 变形
3.3.1 平移
将2D渲染上下文的原点从一个位置移动到另一个位置。注意,这里移动的是坐标原点即全局绘图位置,API如下:

JavaScript Code复制内容到剪贴板
  1. //将坐标原点移动到(x,y)    context.translate(x, y)  

3.3.2 缩放

JavaScript Code复制内容到剪贴板
  1. //将全局横纵尺寸缩放至x,y倍(即在原有数值乘上倍乘因子)    context.scale(x, y)  

3.3.3 旋转

JavaScript Code复制内容到剪贴板
  1. //将画布绕着原点旋转radius弧度    context.rotate(radius)