分类目录归档:Canvas

Canvas那点不可告人的事-。-!

HTML5 Canvas 学习笔记之需要注意的问题以及知识点记录

  1. canvas元素实际上有两套尺寸。一个是元素本身的大小,还有一个是元素绘图表面(drawing surface)的大小,这两个尺寸默认为300px * 150px。如果给canvas设置width、height属性的话等于同时设置了canvas本身的大小和drawing surface的大小(正规的设置),如果没有给canvas设置width、height属性而只是通过css给canvas设置width、height的话等于只设置了canvas元素本身的大小而没有设置drawing surface的大小,此时浏览器会对drawing surface进行缩放,使其符合元素本身的大小,现象就好像是一张300*150的图片被缩放成其它的尺寸。
  2. fillText(‘bbs0101’, 0, 0) 方法是以文字左下角为基准绘制的
  3. Canvas环境状态的保存与恢复:context.save()   /   context.restore()
  4. Canvas画布状态的保存与恢复:
    drawingSurfaceImageData = context.getImagesData(0, 0, canvas.width, canvas.height);
    context.putImageData(drawingSurfaceImageData, 0, 0);
  5. 绘制线段时,如果要绘制一条真正1像素宽的线段,你必须将该线段绘在一像素中间的位置上(例如绘制横线,y=50.5),这样绘制出来的是一像素宽的线段,不能绘制在两个像素之间(例如绘制横线,y=50),这样绘制出来的是2像素宽的线段