zoukankan      html  css  js  c++  java
  • canvas的图片绘制案例

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <div id="container">
    <canvas id="cavsElem">
    你的浏览器不支持canvas,请升级浏览器
    </canvas>
    </div>
    <script>
    (function(){
    var canvas=document.querySelector('#cavsElem');
    var ctx=canvas.getContext('2d');
    canvas.width=600;
    canvas.height=600;
    canvas.strokeStyle='1px solid #000';
    var img=new Image();
    img.src='a.jpg';
    img.onload=function(){
    var ow=img.width;
    var oh=img.height;
    // context.drawImage(img,x,y,width,height);
    // 参数说明:width 绘制图片的宽度, height:绘制图片的高度
    // 如果指定宽高,最好成比例,不然图片会被拉伸</em>
    // 等比公式: toH = Height * toW / Width; //等比
    // 设置高 = 原高度 * 设置宽/ 原宽度;
    ctx.drawImage(img,100,100,400,400*oh/ow);
    };
    var img2=new Image();
    img2.src='gameImgs/DMMban.png';
    img2.onload=function(){
    // context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    // 参数说明:
    // sx,sy 裁剪的左上角坐标,
    // swidth:裁剪图片的高度。 sheight:裁剪的高度
    // 其他同上
    ctx.drawImage(img2,40,65,40,65,315,295,40,65);
    }
    }());
    </script>
    </body>
    </html>
  • 相关阅读:
    SQLServer之创建表值函数
    SQLServer之创建标量函数
    SQLServer之函数简介
    SQLServer之创建分布式事务
    SQLServer之创建隐式事务
    SQLServer之创建显式事务
    SQLServer之事务简介
    SQLServer之删除存储过程
    geoserver 添加图层数据
    geoserver入门
  • 原文地址:https://www.cnblogs.com/yangguoe/p/7904210.html
Copyright © 2011-2022 走看看