[js高手之路] html5 canvas体系教程 - 图片操作(draw

作者:分分快三计划
1     var oCanvas = document.querySelector( "#canvas" ),
2         oGc = oCanvas.getContext( '2d' ),
3         oImg = document.querySelector( "img" );
4         oGc.drawImage( oImg, 100, 100, 100, 100 );

[/javascript]

分分快三计划 1

最终大家看一下剪裁图片,剪裁要与路线合营使用,通过路线与图像交叉的样式,调用clip方法剪裁图像。

drawImage( image, sx, sy, sw, sh, dx, dy, dw, dh )


那张图片的原始尺寸是200x200,加载到canvas中,把他调治成100x100

*率先个参数image能够用HTMLImageElement,HTMLCanvasElement或然HTMLVideoElement作为参数。
*dx、dy是image在canvas中平昔的坐标值;
*dw、dh是image在canvas中将在绘制区域(相对dx和dy坐标的偏移量卡塔 尔(阿拉伯语:قطر‎的上涨的幅度和低度值;
*sx、sy是image所要绘制的发端地点;
*sw、sh是image所要绘制区域(相对image的sx和sy坐标的偏移量卡塔尔国的增长幅度和中度值。
*/
function drawImage() {
Ca();
var canvas = draw();
var image = new Image();
image.src = "_image.png";
image.onload = function () {
for (var i = 0; i < 5; i ) {
canvas.drawImage(image, i * 50, i * 25, 379, 80);
}
};
}

3,调节图片大小

[javascript]

drawImage( image, dx, dy, dw, dh )

/*制图图片
drawImage(x,y);
HTML5中引进新的因素canvas,其drawImage 方法允许在 canvas 中插入别的图像( img 和 canvas 成分) 。drawImage函数有三种函数原型:

风流倜傥、canvas怎么加载图片?

demo在此!

万一是动态创建的图形,也还正常

/*图片剪裁
通过路线与图像交叉的样式,调用clip方法剪裁图像
*/
function drawImageClip() {
Ca();
var canvas = draw();
var image = new Image();
canvas.save();//保存当前画布
image.onload = function () {
canvas.beginPath();
canvas.arc(220, 100, 100, 0, 2 * Math.PI, true);//创造圆形剪裁路线
canvas.clip();//剪裁
canvas.drawImage(image, 180, 20, 100, 60, 50, 25, 379, 80);
};
image.src = "_image.png";

1,动态创立图片

[javascript]

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' ),
11         oImg = document.querySelector( "img" );
12         oGc.drawImage( oImg, 100, 100 );
13 }
14 </script>
15 </head>
16 <body>
17 <canvas id="canvas" width="500" height="400"></canvas>
18 <img src="./img/mv.jpg" alt="分分快三计划 2">
19 </body>

[javascript]

页面三春经存在的图形,是不需求加载的,因为他曾经加载出来了,用选择器直接获取即可加载到canvas中.

应接来到前端攻城记。

dw,dh:倘诺加载之后的图片尺寸不对,能够通过那三个参数,调节幅度与中度

[/javascript]

dx, dy: 正是图形需求加载到canvas上的坐标地点

drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

image:就是图片对象, 那个图片对象足以是动态创设出来的,也能够是页面上黄金年代度存在的图片成分

drawImage(image, dx, dy) 
drawImage(image, dx, dy, dw, dh) 
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

canvas提供3种图片加载的API调用格局.

}

对此动态成立的图样对象,应当要用onload把那张图片加载成功未来,技能渲染在canvas上,不然是不会渲染的.

分分快三计划 3

1     var oCanvas = document.querySelector( "#canvas" ),
2         oGc = oCanvas.getContext( '2d' );
3 
4     var oImg = new Image();
5     oImg.src = './img/mv.jpg';
6     oImg.onload = function(){
7         oGc.drawImage( oImg, 100, 100, 100, 100 );
8     }

/*风姿罗曼蒂克对绘制
此间我们利用宽高可决定缩放
*/
function drawImageArea() {
Ca();
var canvas = draw();
var image = new Image();
image.src = "_image.png";
image.onload = function () {
canvas.drawImage(image, 180, 20, 100, 60, 50, 25, 379, 80);
};
}
/*图片
createPattern 能够达成平铺图片
createPattern(image,type)
image为要平铺的图像
type分为:
no-repeat:不平铺
repeat-x:横向平铺
repeat-y:纵向平铺
repeat:全体平铺
*/
function drawImagePingPu() {
Ca();
var canvas = draw();
var image = new Image();
image.src = "_image.png";
image.onload = function () {
var pp = canvas.createPattern(image, 'repeat');
canvas.fillStyle = pp;
canvas.fillRect(0, 0, wh.width, wh.height);
};
}

2,把页面上曾经存在的图样加载进来

[/javascript]

drawImage( image, dx, dy )

语法:

4,裁剪某部分图片,再渲染到canvas上面

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' );
11 
12     var oImg = new Image();
13     oImg.src = './img/mv.jpg';
14     oImg.onload = function(){
15         oGc.drawImage( oImg, 20, 20, 100, 100, 100, 100, 100, 100 );
16     }
17 }
18 </script>
19 </head>
20 <body>
21 <canvas id="canvas" width="500" height="400"></canvas>
22 </body>

分分快三计划 4

从原图的20, 20以此职责,裁剪出100 x 100那个区域,再渲染到canvas.

二、图片的平铺

css的background有平铺样式background-repeat,他有4个值( no-repeat【不平铺】, repeat-x【水平平铺】,repeat-y【垂直平铺】,repeat【水平和垂直三个方向都平铺】卡塔尔。

canvas跟这一个是形似的,用法:

var pattern = cxt.createPattern( image, type )

cxt.fillStyle = pattern

cxt.fillRect()

image就是图片对象,type便是平铺样式( no-repeat, repeat-x, repeat-y, repeat ).

fillStyle可以给它赋3种值:颜色、图案、渐变色。颜色在事先已经运用过很频仍了.

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' ),
11         width = oCanvas.width, height = oCanvas.height;
12 
13     var oImg = new Image();
14     oImg.src = './img/mv.jpg';
15     oImg.onload = function(){
16         var pattern = oGc.createPattern( oImg, 'repeat' );
17         oGc.fillStyle = pattern;
18         oGc.fillRect( 0, 0, width, height );
19     }
20 }
21 </script>
22 </head>
23 <body>
24 <canvas id="canvas" width="800" height="600"></canvas>
25 </body>

分分快三计划 5

repeat-x:

var pattern = oGc.createPattern( oImg, 'repeat-x' );

分分快三计划 6

repeat-y

var pattern = oGc.createPattern( oImg, 'repeat-y');

分分快三计划 7

no-repeat:

var pattern = oGc.createPattern( oImg, 'no-repeat' );

分分快三计划 8

用canvas填充canvas:

创办三个新的canvas,width:200,height:200, 然后再创设三个原心100, 100,半径100的圆,用那个圆作为填充样式填入到canvas.

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' ),
11         width = oCanvas.width, height = oCanvas.height;
12 
13     var oNewCanvas = document.createElement( "canvas" );
14         oNewCanvas.width = 200,
15         oNewCanvas.height = 200,
16         oNewGc = oNewCanvas.getContext( '2d' );
17         oNewGc.beginPath();
18         oNewGc.fillStyle = '#09f';
19         oNewGc.arc( 100, 100, 100, 0, 360 * Math.PI / 180, false );
20         oNewGc.closePath();
21         oNewGc.fill();
22 
23         var pattern = oGc.createPattern( oNewCanvas, 'repeat' );
24         oGc.fillStyle = pattern;
25         oGc.fillRect( 0, 0, width, height );
26 }
27 </script>
28 </head>
29 <body>
30 <canvas id="canvas" width="800" height="600"></canvas>
31 </body>

分分快三计划 9

三、切割图片clip

 用法:

cxt.clip()

步骤:

1,绘制剪切区域

2,调用裁剪方法clip

3,加载被细分的材料(图片恐怕图片等)

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' ),
11         width = oCanvas.width, height = oCanvas.height;
12 
13     oGc.beginPath();
14     oGc.arc( 200, 200, 100, 0, 360 * Math.PI / 180, false );
15     oGc.closePath();
16 
17     oGc.clip();
18 
19     var oImg = new Image();
20     oImg.src = './img/mv.jpg';
21     oImg.onload = function(){
22         oGc.drawImage( oImg, 100, 100 );
23     }
24 }
25 </script>
26 </head>
27 <body>
28 <canvas id="canvas" width="800" height="600"></canvas>
29 </body>

分分快三计划 10

剪裁的区域坐标依然相对canvas.

矩形裁剪:

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' ),
11         width = oCanvas.width, height = oCanvas.height;
12 
13     oGc.beginPath();
14     oGc.rect( 10, 10, 150, 150 )
15     oGc.closePath();
16 
17     oGc.clip();
18 
19     var oImg = new Image();
20     oImg.src = './img/mv.jpg';
21     oImg.onload = function(){
22         oGc.drawImage( oImg, 0, 0 );
23     }
24 }
25 </script>
26 </head>
27 <body>
28 <canvas id="canvas" width="800" height="600"></canvas>
29 </body>

分分快三计划 11

 用canvas裁剪的美术,填充canvas

 1 <meta charset='utf-8' />
 2 <style>
 3     #canvas {
 4         border: 1px dashed #aaa;
 5     }
 6 </style>
 7 <script>
 8     window.onload = function () {
 9         var oCanvas = document.querySelector("#canvas"),
10             oGc = oCanvas.getContext('2d'),
11             width = oCanvas.width, height = oCanvas.height;
12 
13         var oNewCanvas = document.createElement( "canvas" );
14             oNewCanvas.width = 200,
15             oNewCanvas.height = 200,
16             oNewGc = oNewCanvas.getContext( '2d' );
17 
18         oNewGc.beginPath();
19         oNewGc.arc(100, 100, 100, 0, 360 * Math.PI / 180, false);
20         oNewGc.closePath();
21 
22         oNewGc.clip();
23 
24         var oImg = new Image();
25         oImg.src = './img/mv.jpg';
26         oImg.onload = function () { //这个一个异步加载,一定要把填充放在图片完成之后额
27             oNewGc.drawImage(oImg, 0, 0);
28             var pattern = oGc.createPattern( oNewCanvas, 'repeat' );
29             oGc.fillStyle = pattern;
30             oGc.fillRect( 0, 0, width, height );
31         }
32     }
33 
34 </script>
35 </head>
36 
37 <body>
38     <canvas id="canvas" width="800" height="600"></canvas>
39 </body>

分分快三计划 12

 

HTML5中引入新的成分canvas,其drawImage 方法允许在 canvas 中插入其余图像( img 和 canvas 元素) 。drawImage函数有三种函数原型:

分分快三计划 13

*先是个参数image能够用HTMLImageElement,HTMLCanvasElement也许HTMLVideoElement作为参数。
*dx、dy是image在canvas中一向的坐标值;
*dw、dh是image在canvas中将在绘制区域(相对dx和dy坐标的偏移量卡塔 尔(英语:State of Qatar)的增加率和中度值;
*sx、sy是image所要绘制的发端地方;
*sw、sh是image所要绘制区域(绝对image的sx和sy坐标的偏移量卡塔尔的增长幅度和高度值。

分分快三计划 14

感谢大家关注前端攻城记

 接着上文[js高手之路] html5 canvas体系教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)持续,本文介绍的剧情是canvas开拓,非常是娱乐中,比较常用的从头到尾的经过:图片管理。在游戏中的能源大多数都是加载图片.

接下去大家来画二个有的特写的图形微风流倜傥组平铺图片

sx,sy,sw,sh: s就是source的意趣,那四个参数是第两种调用方式故意的, 第三种调用格局正是同意裁剪图片的某部分,然后在加载到canvas画布上.

不久前大家来看一下制图图片。

 1 <meta charset='utf-8' />
 2 <style>
 3 #canvas{
 4     border:1px dashed #aaa;
 5 }
 6 </style>
 7 <script>
 8 window.onload = function(){
 9     var oCanvas = document.querySelector( "#canvas" ),
10         oGc = oCanvas.getContext( '2d' );
11 
12     var oImg = new Image();
13     oImg.src = './img/mv.jpg';
14     oImg.onload = function(){
15         oGc.drawImage( oImg, 100, 100 );
16     }
17 }
18 </script>
19 </head>
20 <body>
21 <canvas id="canvas" width="500" height="400"></canvas>
22 </body>

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划