接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续，本文介绍的内容是canvas开发，特别是游戏中，比较常用的内容：图片处理。在游戏中的资源大多数都是加载图片.

一、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，动态创建图片

 <meta charset='utf-8' />

 <style>

 #canvas{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' );

     var oImg = new Image();

     oImg.src = './img/mv.jpg';

     oImg.onload = function(){

         oGc.drawImage( oImg, 100, 100 );

     }

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="500" height="400"></canvas>

 </body>

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

2，把页面上已经存在的图片加载进来

 <meta charset='utf-8' />

 <style>

 #canvas{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' ),

         oImg = document.querySelector( "img" );

         oGc.drawImage( oImg, 100, 100 );

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="500" height="400"></canvas>

 <img src="./img/mv.jpg" alt="">

 </body>

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

3，调整图片大小

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' ),

         oImg = document.querySelector( "img" );

         oGc.drawImage( oImg, 100, 100, 100, 100 );

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

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

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' );

     var oImg = new Image();

     oImg.src = './img/mv.jpg';

     oImg.onload = function(){

         oGc.drawImage( oImg, 100, 100, 100, 100 );

     }

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

 <meta charset='utf-8' />

 <style>

 #canvas{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' );

     var oImg = new Image();

     oImg.src = './img/mv.jpg';

     oImg.onload = function(){

         oGc.drawImage( oImg, 20, 20, 100, 100, 100, 100, 100, 100 );

     }

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="500" height="400"></canvas>

 </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种值：颜色、图案、渐变色。颜色在之前已经使用过很多次了.

 <meta charset='utf-8' />

 <style>

 #canvas{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' ),

         width = oCanvas.width, height = oCanvas.height;

     var oImg = new Image();

     oImg.src = './img/mv.jpg';

     oImg.onload = function(){

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

         oGc.fillStyle = pattern;

         oGc.fillRect( 0, 0, width, height );

     }

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="800" height="600"></canvas>

 </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' );

用canvas填充canvas：

创建一个新的canvas，width:200,height:200, 然后再创建一个原心100, 100，半径100的圆，用这个圆作为填充样式填充到canvas.

 <meta charset='utf-8' />

 <style>

 #canvas{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' ),

         width = oCanvas.width, height = oCanvas.height;

     var oNewCanvas = document.createElement( "canvas" );

         oNewCanvas.width = 200,

         oNewCanvas.height = 200,

         oNewGc = oNewCanvas.getContext( '2d' );

         oNewGc.beginPath();

         oNewGc.fillStyle = '#09f';

         oNewGc.arc( 100, 100, 100, 0, 360 * Math.PI / 180, false );

         oNewGc.closePath();

         oNewGc.fill();

         var pattern = oGc.createPattern( oNewCanvas, 'repeat' );

         oGc.fillStyle = pattern;

         oGc.fillRect( 0, 0, width, height );

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="800" height="600"></canvas>

 </body>

三、切割图片clip

用法：

cxt.clip()

步骤：

1，绘制剪切区域

2，调用裁剪方法clip

3，加载被剪切的素材(图片或者图形等)

 <meta charset='utf-8' />

 <style>

 #canvas{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' ),

         width = oCanvas.width, height = oCanvas.height;

     oGc.beginPath();

     oGc.arc( 200, 200, 100, 0, 360 * Math.PI / 180, false );

     oGc.closePath();

     oGc.clip();

     var oImg = new Image();

     oImg.src = './img/mv.jpg';

     oImg.onload = function(){

         oGc.drawImage( oImg, 100, 100 );

     }

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="800" height="600"></canvas>

 </body>

裁剪的区域坐标还是相对canvas.

矩形裁剪：

 <meta charset='utf-8' />

 <style>

 #canvas{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' ),

         width = oCanvas.width, height = oCanvas.height;

     oGc.beginPath();

     oGc.rect( 10, 10, 150, 150 )

     oGc.closePath();

     oGc.clip();

     var oImg = new Image();

     oImg.src = './img/mv.jpg';

     oImg.onload = function(){

         oGc.drawImage( oImg, 0, 0 );

     }

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="800" height="600"></canvas>

 </body>

用canvas裁剪的图案，填充canvas

 <meta charset='utf-8' />

 <style>

     #canvas {

         border: 1px dashed #aaa;

     }

 </style>

 <script>

     window.onload = function () {

         var oCanvas = document.querySelector("#canvas"),

             oGc = oCanvas.getContext('2d'),

             width = oCanvas.width, height = oCanvas.height;

         var oNewCanvas = document.createElement( "canvas" );

             oNewCanvas.width = 200,

             oNewCanvas.height = 200,

             oNewGc = oNewCanvas.getContext( '2d' );

         oNewGc.beginPath();

         oNewGc.arc(100, 100, 100, 0, 360 * Math.PI / 180, false);

         oNewGc.closePath();

         oNewGc.clip();

         var oImg = new Image();

         oImg.src = './img/mv.jpg';

         oImg.onload = function () { //这个一个异步加载，一定要把填充放在图片完成之后额

             oNewGc.drawImage(oImg, 0, 0);

             var pattern = oGc.createPattern( oNewCanvas, 'repeat' );

             oGc.fillStyle = pattern;

             oGc.fillRect( 0, 0, width, height );

         }

     }

 </script>

 </head>

 <body>

     <canvas id="canvas" width="800" height="600"></canvas>

 </body>

[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  2. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  3. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  4. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  5. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  6. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  7. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  8. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  9. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

随机推荐

  1. OPENFILENAME使用lpstrFilter过滤文件类型

    OPENFILENAME结构包含了GetOpenFileName和GetSaveFileName函数用来初始化打开或另存为对话框的信息.其中lpstrFilter用来指定文件文件过滤器. 字符串由'\ ...

  2. 推广技巧：新站要如何推广引流做到日IP10000？

    一.回复高人气帖子插楼推广 1.找高人气的帖子在二楼或者二楼楼层中直接插入链接推广.虽然这种方法存活率比较低,但也算是贴吧里面最直接的有效的方法.一般我们分为三种: 1.1图中链接是一个短网址,这个是 ...

  3. java匿名内部类举例

    public class Test { public static void main(String[] args) { //4.匿名内部类 //主要是针对那些不能直接创建对象的抽象类和接口而来的 S ...

  4. 设计模式，Let's “Go”！ (下)

    * { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...

  5. 阿里云centos下安装nginx、jdk、tomcat、绑定域名、解析域名

    1.ESC后安全设置(管理控制台->本实例安全组->配置规则->添加安全组规则->3306.80端口配置) 2.nginx  安装,首先安装三大件  PCRE.zlib.ope ...

  6. iOS js oc相互调用（JavaScriptCore 下）

    下来我们使用js调用iOS js调用iOS分两种情况 一,js里面直接调用方法 二,js里面通过对象调用方法 首先我们看第一种,直接调用方法. 其中用到了iOS的block 上代码 -(void)we ...

  7. 聊聊click延迟和点击穿透

    博客原文地址:Claiyre的个人博客 https://claiyre.github.io/ 如需转载,请在文章开头注明原文地址 移动端click事件被延迟 移动端的开发经常需要监听用户的双击行为,所 ...

  8. python 每日一练： 读取log文件中的数据，并画图表

    之前在excel里面分析log数据,简直日了*了. 现在用python在处理日志数据. 主要涉及 matplotlib,open和循环的使用. 日志内容大致如下 2016-10-21 21:07:59 ...

  9. unity中object 对象之间用c# delegate方式进行通信

    unity 3D经常需要设计到不同object之间数据通信和事件信息触发.这里可以利用C#本身的事件和代理的方法来实现. 这里实现了在GUI上点击按钮,触发事件,移动object cube移动的例子. ...

  10. MongoDB学习之路(一)

    NoSQL简介 NoSQL(Not Only SQL),意为"不仅仅是SQL" 关系型数据库遵循ACID规则 1. A(Atomicity)原子性 指的是事务里的所有操作要么全部做 ...