zoukankan      html  css  js  c++  java
  • 【canvas】高级功能一 变形

    【canvas】Demo1 scale缩放

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>图片</title>
    </head>
    <body>
    
    <canvas id="wapper" width="1000" height="1000"></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, 5, 5);/*drawImage(img,x,y)*/
    
    	_2d.scale(1, 1);
    	_2d.drawImage(this, 200, 5);/*drawImage(img,x,y)*/
    
    	_2d.scale(2,2);
    	_2d.drawImage(this, 0, 50);/*drawImage(img,x,y)*/
    
    	_2d.scale(0.2,0.2);
    	_2d.drawImage(this, 0, 800);/*drawImage(img,x,y)*/
    
    
    }
    </script>
    </body>
    </html>
    

      

    【canvas】Demo2 translate移动

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>图片</title>
    </head>
    <body>
    
    <canvas id="wapper" width="1000" height="1000"></canvas>
    
    <script>
    var wapper = document.getElementById('wapper'),
    	_2d = wapper.getContext('2d');/*2d的绘制对象*/
    
    _2d.fillRect(10,10,100,50);
    _2d.translate(70,70);
    _2d.fillRect(10,10,100,50);
    
    </script>
    </body>
    </html>
    

      

    【canvas】Demo3 rotate旋转

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>rotate</title>
    </head>
    <body>
    
    <canvas id="wapper" width="1000" height="1000"></canvas>
    
    <script>
    var wapper = document.getElementById('wapper'),
    	_2d = wapper.getContext('2d');/*2d的绘制对象*/
    
    _2d.fillRect(50,50,100,50);
    _2d.rotate(10*Math.PI/180);/*以画布0.0为中心的旋转*/
    _2d.fillRect(50,50,100,50);
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    如何将SLIC集成到ESXi中
    System Board Replacement Notice
    分发器上的会话代理进程控制脚本使用说明
    lib和dll的区别与使用
    vs2017自动生成的#include“stdafx.h”详解及解决方案
    禅定是否一定要打坐,为什么?
    PE文件解析 基础篇
    灵修书籍
    HDU 2546 饭卡(01背包裸题)
    codeforces 767A Snacktower(模拟)
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/4442312.html
Copyright © 2011-2022 走看看