zoukankan      html  css  js  c++  java
  • 【canvas】基础练习三 图片

    【canvas】Demo1 drawImage

    drawImage(img,x,y); 

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>图片</title>
    </head>
    <body>
    
    <canvas id="wapper" width="500" height="500"></canvas>
    
    <script>
    var wapper = document.getElementById('wapper'),
    	_2d = wapper.getContext('2d');/*2d的绘制对象*/
    
    var logo = new Image();
    logo.src = 'http://www.baidu.com/img/bd_logo1.png';
    
    logo.onload = function (){
    	_2d.drawImage(this, 0, 0);
    }
    </script>
    </body>
    </html> 

    【canvas】Demo2 drawImage

    drawImage(img,x,y)

    drawImage(img,x,y,w,h)

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>图片</title>
    </head>
    <body>
    
    <canvas id="wapper" width="500" height="500"></canvas>
    
    <script>
    var wapper = document.getElementById('wapper'),
    	_2d = wapper.getContext('2d');/*2d的绘制对象*/
    
    var logo = new Image();
    logo.src = 'http://icon.xgo-img.com.cn/mainpage/20150226/logo_07.jpg';
    
    logo.onload = function (){
    	_2d.drawImage(this, 0, 0);/*drawImage(img,x,y)*/
    	_2d.drawImage(this, 300, 0, 100, 100);/*drawImage(img,x,y,w,h)*/
    	_2d.drawImage(this, 50, 50,100,100,0,200,100,100);/*drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)*/
    }
    </script>
    </body>
    </html>
    

     

    【canvas】Demo3 getImageData putImageData createImageData

    getImageData获取图片上的一部分数据

    putImageData绘制获取图片上的数据

    createImageData创建新像素

    目前没有找到这三个方法的优点,暂不示例。 

  • 相关阅读:
    linux编程:删除文件夹下的空文件
    设置vim的显示颜色
    LVM的实现流程
    LVM(逻辑卷管理器)原理
    Ext2文件的访问与日志文件系统
    Linux系统的Ext2文件系统
    linux 磁盘分区的理解
    postgresql在Linux下的安装
    内存泄漏工具VLD
    关于 正交投影 与 透视投影
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/4441915.html
Copyright © 2011-2022 走看看