canvas教程

html5 canvas教程:图片操作(drawImage,clip,createPattern)详解

字号+ 作者:H5之家 来源:H5之家 2017-10-02 12:07 我要评论( )

一、canvas怎么加载图片? canvas提供3种图片加载的API调用方式. drawImage( image, dx, dy ) drawImage( image, dx, dy, dw, dh ) drawImage( image, sx, sy, s

> 脚本语言 > >

html5 canvas教程:图片操作(drawImage,clip,createPattern)详解 2017-09-27 15:34 出处:清屏网 人气: 

一、canvas怎么加载图片?

canvas提供3种图片加载的API调用方式.

drawImage( image, dx, dy )

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

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

image:就是图片对象, 这个图片对象可以是动态创建出来的,也可以是页面上已经存在的图片元素

dx, dy: 就是图片需要加载到canvas上的坐标位置

dw,dh:如果加载之后的图片尺寸不对,可以通过这两个参数,调整宽度与高度

sx,sy,sw,sh: s就是source的意思,这四个参数是第三种调用方式特有的, 第三种调用方式就是允许裁剪图片的某部分,然后在加载到canvas画布上.

1,动态创建图片 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>

对于动态创建的图片对象,一定要用onload把这张图片加载完成之后,才能渲染在canvas上,否则是不会渲染的.

2,把页面上已经存在的图片加载进来 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=""> 19 </body>

页面上已经存在的图片,是不需要加载的,因为他已经加载出来了,用选择器直接获取就可以加载到canvas中.

3,调整图片大小 1 var oCanvas = document.querySelector( "#canvas" ), 2 oGc = oCanvas.getContext( '2d' ), 3 oImg = document.querySelector( "img" ); 4 oGc.drawImage( oImg, 100, 100, 100, 100 );

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

如果是动态创建的图片,也没有问题

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 } 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>

从原图的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>

repeat-x:

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

repeat-y

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

no-repeat:

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 狂拽酷炫canvas背景特效

    狂拽酷炫canvas背景特效

    2017-10-02 12:12

  • Unity3D学习笔记uGUI(9):Canvas详述

    Unity3D学习笔记uGUI(9):Canvas详述

    2017-10-02 11:06

  • html5 canvas教程:掌握画直线图形的常用API

    html5 canvas教程:掌握画直线图形的常用API

    2017-10-02 11:01

  • canvas学习相关的一点东西

    canvas学习相关的一点东西

    2017-10-02 09:14

网友点评