HTML5自学笔记[ 17 ]canvas绘图基础4

Posted 2020-06-09

• 绘制图像：

1. drawImage(oImg,x,y),oImg是一个Image对象，(x,y)为绘制起点，绘制的图像大小和源图大小一样。
2. drawImage(oImg,x,y,w,h),后两个参数设置绘制后的图形大小。
3. drawImage(oImg,x1,y1,w1,h1,x2,y2,w2,h2),该方法获取源图像的一部分进行绘制并且指定绘制起点和绘制后图像的大小，x1/y1/w1/h1表示选取源图上(x1,y1)点起宽w1高h1的部分，x2/y2/w2/h2表示将选取的部分绘制到画布(x2,y2)的地方，并且宽高为w2/h2。

• 渐变

1. 线性渐变createLinearGradient(x1,y1,x2,y2),4个参数分别代表起点和重点的坐标。
2. 径向渐变createRadialGradient(x1,y1,r1,x2,y2,r2),6个参数分别代表两个圆的圆心和半径。
3. 以上两个方法创建了渐变对象后，要使用addStopColor()来指定色标；该方法接收两个参数：色标位置和颜色。
4. 最后将渐变对象赋给fillStyle或strokeStyle后就可以绘制出渐变效果了。

• 模式

1. 公式：createPattern(oImg,repeatStyle),oImg是一个img元素，repeatStyle是一个字符串，表示重复方式，可选值和样式中背景的重复一样，包括"repeat","repeat-x","repeat-y","no-repeat"。
2. 模式的第一个参数也可以是一个video元素，或者另外一个canvas元素。
3. 注：模式和渐变一样，是从画布的原点(0,0)开始的，将样式填充设置为模式对象，只表示某个特定的区域内显示重复的图像，而不是要从某个位置开始绘制重复的图像；如：

   1 var pattern = oContext.createPattern(oImg,0,0);
   2 oContext.fillStyle = pattern;
   3 oContext.fillRect(20,20,100,100);

   只会看见第一行和第一列的图片显示不全，少了上面和左边的20像素，这是因为图像不是从矩形原点开始重复，而是从画布原点开始重复的。

• 绘制文本

1. font属性设置文本的样式、大小和字体。其中，字体是必填项。如："16px arial"。
2. textAlign:文本水平对齐方式，可选值有start/end/center/left/right；建议使用start/end。
3. textBaseLine:文本垂直对齐方式，默认alphabetic，可选值有top/bottom/middle/alphabetic/ideographic/hanging。
4. 绘制文本一样有填充和描边两种方式：fillText()、strokeText();这两个方法接收四个参数：str/x/y/maxWidth；maxWidth是最大宽度，如果文本长度大小该值就会在高度符合的情况下收缩。
5. mesureText(str):该方法可以测量要绘制的文本str的宽度，该方法返回一个TextMetric对象，该对象的属性width就是文本宽度。

• 阴影

1. 设置shadowColor指定阴影颜色，默认透明的黑色，因此，如果不设置该属性，就看到阴影效果。
2. 设置shadowOffsetX指定阴影在x方向的偏移量，默认0。
3. 设置shadowOffsetY指定阴影在y方向的偏移量，默认0。
4. 设置shadowBlur指定模糊的像素数，默认0，既不模糊。