HTML5 中的 canvas 画布(二)

绘制图片

一.绘制图片 context.drawImage()(即把图片放到canvas里)

var image = new Image();  // 先创建图片对象
image.src = '图片的位置';

1. context.drawImage(image,20,20);   //三个参数 1.图片 2.x轴位置 3.y轴位置  图片的原本大小

2. context.drawImage(image,0,0,300,400)  //5个参数 1.图片 2.x轴位置 3.y轴位置 4.绘制图片的宽度 5. 绘制图片的高度

3.context.drawImage(image,10,10,100,100,200,200,100,100); //9个参数 1.图片对象 2.3.4.5.个参数 我们截取部分的图片中的位置和大小
                                                                                                   6,7个参数是新图的位置 8,9, 截取后图片的大小

image.onload = function(){
context.drawImage(image,0,0,300,400);  // 5个参数 1.图片 2.x轴位置 3.y轴位置 4.绘制图片的宽度 5. 绘制图片的高度

二.改变图片像素的颜色  context.putImageData()

概念:对imagedata数组中的各个像素的r、g、b、a值进行修改,再调用putImageData方法进行绘制;

HTML5 中的 canvas  画布(二)

HTML5 中的 canvas  画布(二)

绘制文字

填充文字: context.fillText(text,x,y)      // 实心文字                  x:文字起点的x坐标轴     y:文字起点的y坐标轴 

绘制文字轮廓 : context.strokeText(text,x,y)  // 空心文字          

绘制文字样式:context.font:'40px Arial';  // 40px大小的Arial

水平对齐方式:  context.textAlign: ( start、end、right、center);  

垂直对齐方式:  context.textBaseline( top、hanging、middle、alphabetic、ideographic、bottom);

 下面是代码和 输入的样式:

context.font = '40px Arial';
var text = 'fill 的例子演示';
context.fillText(text,100,100);
context.strokeText(text,100,150);

HTML5 中的 canvas  画布(二)

储存

context.save():调用该方法,会保存当前context的状态、属性(把他理解成游戏存档)

恢复

context.restore():调用该方法就能恢复到save时候context的状态、属性(游戏回档)

绘制贝赛尔曲线

context.bezierCurveTo(x1,y1,x2,y2,x3,y3);    // (x1,y1)第一个控制点 (x2,y2)第二个控制点 (x3,y3)锚点

绘制二次样条曲线

context.quadraticCurveTo(x1,y1,x2,y2);   //  (x1,y1)控制点 (x2,y2)锚点

图片的平铺

context.createPattern(image, no-repeat || repeat-x || repeat-y || repeat) ;

no-repeat  不平铺  repeat-x 沿x轴平铺  repeat-y 沿y轴平铺  reoeat 全图平铺

HTML5 中的 canvas  画布(二)

HTML5 中的 canvas  画布(二)

图片的剪裁

context.clip()  //只绘制封闭路径区域内的图像,不绘制路径外部图像,用的时候 1.先创建裁剪区域 2.再绘制图像

HTML5 中的 canvas  画布(二)

HTML5 中的 canvas  画布(二)

上一篇:Git强制拉取覆盖本地


下一篇:AC日记——将字符串中的小写字母换成大写字母 openjudge 1.7 13