zoukankan      html  css  js  c++  java
  • [js高手之路] html5 canvas系列教程

     接着上文[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,动态创建图片

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

    用canvas填充canvas:

    创建一个新的canvas,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>

    三、切割图片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>

    裁剪的区域坐标还是相对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>

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

  • 相关阅读:
    Oracle86和92语法的连接,子查询,集合的操作
    Oracle笛卡尔积,分组,多表连接
    Oracle排序,伪列,字符函数,数字函数,日期行数
    Oracle基本的数据类型以及简单sql查询
    用while语句打印阶乘
    Switch小练习
    if语句多表达式与一个表达式
    三元操作符
    整数的二进制表达
    与或
  • 原文地址:https://www.cnblogs.com/ghostwu/p/7600654.html
Copyright © 2011-2022 走看看