HTML5读书笔记——canvas元素(续)

    自定义笔画样式

    canvas默认绘图颜色为黑色,若想改变形状颜色,主要通过使用以下两个属性:

  • fillStyle:设置接下来所有fill操作的默认颜色;
  • strokeStyle:设置接下来所有stroke操作的默认颜色。

     这两个属性都可以接收有效的CSS颜色作为值,包括rgb()、rgba()以及颜色常量值。具体实现如下:

    

    绘制图像

    在绘制图像之前,首先要将图片加载至浏览器中。这里我们可以在<canvas>标签之后添加一个<img>标签如下:

<img src="plane.jpg" id="plane">

    使用drawImage()方法绘制图像,主要有以下三种方式:

  • drawImage(image,x,y):在画布的(x,y)处绘制图像;
  • drawImage(image,x,y,width,height):在画布的(x,y)处绘制图像,并将其缩放至指定的宽度和高度;
  • drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,x,y,width,height):从图片中切割出一个矩形区域(sourceX,sourceY,sourceWidth,sourceHeight),将其缩放至指定的宽度和高度,并在画布的(x,y)处绘制图像;

    平移和旋转

    实现平移和旋转的方法主要有以下几种:

  • translate(x,y):将坐标系的原点平移至另一点(x,y);
  • rotate(angle):以当前原点为中心,顺时针旋转坐标系,旋转角度为angle(弧度制);
  • scale(x,y):以x和y为因子缩放坐标系。

     主要流程如下:

  • 将canvas原点平移至物体处;
  • 以指定角度旋转画布;
  • 绘制物体;
  • 将画布复原至初始状态。

     整体实现过程如下:

原文地址:https://www.cnblogs.com/bees/p/5380100.html