阅读 51

canvas学习笔记

1.基本用法

var canvas = document.getElementById('tutorial');

//检测支持性
if (canvas.getContext){
  //获得 2d 上下文对象
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}
复制代码
  • 绘制形状

    ctx.clearRect(0, 0, 200, 200); //    擦除(0,0)位置大小为200x200的矩形,擦除的意思是把该区域变为透明
    ctx.fillStyle = '#dddddd'; // 设置颜色
    ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
    // 利用Path绘制复杂路径:
    var path=new Path2D();
    path.arc(75, 75, 50, 0, Math.PI*2, true);
    path.moveTo(110,75);
    path.arc(75, 75, 35, 0, Math.PI, false);
    path.moveTo(65, 65);
    复制代码
    1. 绘制方块:
    • fillrect(x,y,w,h) 绘制一个填充的方格,默认颜色是黑色,前两个参数是坐标(x轴和y轴),后两个参数是宽高
    • strokeRect(x,y,w,h) 绘制带边框的方块;

    注意填充(fillrect)和画线(strokeRect)的区别。先画线后填充。那么填充覆盖画线,线框的宽度就会缩小一倍;先填充后画线。那么画线覆盖填充,方块的宽度就会缩小一倍

    1. 设置绘图:
    • fillStyle:填充颜色(绘制canvas是有顺序的)
    • lineWidth:线宽度,是一个数值
    • strokeStyle:边线颜色
    1. 边界的绘制:
    • beginPath:开始绘制路径
    • closePath:结束绘制路径
    • moveTo:移动到绘制的新目标点
    • lineTo:新的目标点。 每个线条只能有一个moveTo()可以有多个lineTo()
    1. 绘制路径
    • stroke:画线,默认黑色
    • fill:填充 默认黑色
    • rect:矩形区域
    • clearRect:删除一个画布的矩形区域
    • save:保存路径
    • restore:回复路径
    1. 清除画布:
    • clearRect(x,y,w,h) 清除画布。前两个参数是坐标(x轴和y轴),后两个参数是宽高
    1. 绘制圆形:
    • arc(x,y,半径,起始弧度,结束弧度,旋转方向):x,y是圆心的坐标。逆时针为-,顺时针为+
  • 绘制文本:就是在指定的位置输出文本,可以设置文本的字体、样式、阴影等,与CSS完全一致

    • fillText("内容",x,y)canvas 上绘制实心的文本,xy是坐标
    • strokeText("内容",x,y)canvas 上绘制空心的文本
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 2;
    ctx.shadowColor = '#666666';
    ctx.font = '24px Arial';
    ctx.fillStyle = '#333333';
    ctx.fillText('带阴影的文字', 20, 40);
    复制代码
  • 画布的平移和旋转

    • translate(x,y) 平移:画布的大小位置不变,是画布的起始位置变了,起始点就是平移的位置,但是作图的地方还是原来的大小
    • rotate() 旋转:属性是角度,旋转都是以画布的起始点(0,0)旋转
    • scale(0.5,0.5) 缩放:画布的缩放,其实就是讲画布向后移动,跟人的视距就变远了,近大远小
  • 如果需要绘制3D怎么办?HTML5还有一个WebGL规范,允许在Canvas中绘制3D图形:

    var gl = canvas.getContext("webgl");
    复制代码
  • Canvas除了能绘制基本的形状和文本,还可以实现动画、缩放、各种滤镜和像素转换等高级操作。如果要实现非常复杂的操作,考虑以下优化方案:

    • 通过创建一个不可见的Canvas来绘图,然后将最终绘制结果复制到页面的可见Canvas
    • 尽量使用整数坐标而不是浮点数;可以创建多个重叠的Canvas绘制不同的层,而不 是在一个Canvas中绘制非常复杂的图
    • 背景图片如果不变可以直接用<img>标签并放到最底层

引申:canvas和svg的区别

Canvas

  • 依赖分辨率(位图)
  • canvas输出的是一整幅画布,不支持事件处理器
  • Canvas是逐像素进行渲染的,一旦图形绘制完成,就不会继续被浏览器关注。所以Canvas的文本渲染能力弱
  • 能够以 .png.jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG

  • 不依赖分辨率(矢量图)
  • 支持事件处理器:svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图):由于其本质为矢量图,可以被无限放大而不会失真,这很适合被用来做地图,而百度地图就是用svg技术做出来的
  • SVG由于DOM操作 在复杂度高的游戏应用中会减慢渲染速度。所以不适合游戏应用

2.使用canvas压缩图片

  1. 先将图片的file文件转成baseURL
  2. 创建一个image标签去接收文件获取图片的宽高和比例。
  3. 创建canvas画布设置画布的大小。
  4. 将图片绘制到canvas上面。
  5. canvas进行压缩处理,获得新的baseURL
  6. baseURL转化回文件
文章分类
前端
文章标签