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

canvas的图片绘制案例的更多相关文章

  1. canvas 2.0 图片绘制

    绘制图片drawImage 2013.02.21 by 十年灯·一条评论 本文属于<html5 Canvas画图系列教程> 这里的绘制图片是指把一张现成的图片,绘制到Canvas上面. 有 ...

  2. 把一个base64编码的图片绘制到canvas (canvas的图片在转成dataurl)

    把一个base64编码的图片绘制到canvas 需要引入jquery. <canvas id="myCanvas" width="800" height= ...

  3. Canvas 中drawImage 绘制不出图片

    在使用Canvas的drawImage绘制图片时,却发现绘制不出图片,原因是图片是异步加载,图片加载完再绘制. //html <img src="1.png" /> & ...

  4. 利用canvas 导出图片

    1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...

  5. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  6. js canvas获取图片base64 dataUrl

    function getImgBase64(path, callback) { var img = new Image(); img.src = path; //图片加载完成后触发 img.onloa ...

  7. canvas给图片加水印

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. ImageDrawer.js图片绘制插件

    ImageDrawer.js图片绘制插件有以下一些可用的配置参数. Duration:整个动画或每个步骤的绘制时间(以秒为单位) Background:在绘图时将颜色放在图片上 Callback:绘画 ...

  9. canvas将图片转成base64格式 以及 验证图片是否透明

    logoImgUpload:function(file) { let self = this; self.formatUpload(file); let reader = new FileReader ...

随机推荐

  1. 抗衡Win Linux全凭这些桌面环境

    2012年01月25日 元老级桌面环境KDE     Linux操作系统最早使用在服务器上,而桌面操作系统并不是Linux的重点突围.但是,近几年Linux桌面操作系统有崛起的趋势,抢夺了部分桌面操作 ...

  2. windows修改环境变量

    windows的环境变量有两套: 系统的 当前用户的 不同的用户可以拥有不同的环境变量,当前用户的环境变量优先级比系统的环境变量优先级高,PATH环境变量比较特殊,它不是替换而是拼接. 在命令行下也可 ...

  3. python实现json转excel

    import json import xlwt a = json.load(open("haha.json", encoding='utf8')) title = list(set ...

  4. 【RS】Amazon.com recommendations: item-to-item collaborative filtering - 亚马逊推荐：基于物品的协同过滤

    [论文标题]Amazon.com recommendations: item-to-item collaborative filtering (2003,Published by the IEEE C ...

  5. iOS 10 的一个重要更新-新的通知推送 API

    iOS 10 最重要的变化可能就是通知 API 的重构了.本文用一个简单闹钟的例子介绍了 User Notification 的 API 变化和新功能. 简介 很久以前,开发者就可以在 iOS 里预约 ...

  6. libpcap详解【转】

    libpcap详解 2010-12-01 22:07 libpcap(Packet Capture Library),即数据包捕获函数库,是Unix/Linux平台下的网络数据包捕获函数库.它是一个独 ...

  7. 【Oracle】Oracle基本数据类型总结

    ORACLE基本数据类型(亦叫内置数据类型 built-in datatypes)可以按类型分为:字符串类型.数字类型.日期类型.LOB类型.LONG RAW& RAW类型.ROWID &am ...

  8. Docker 简单查看name和ip

    原文地址:https://blog.csdn.net/wen_1108/article/details/78282268 查看docker name: sudo docker inspect -f=' ...

  9. sql中union 和 union all的区别

    最近发现一个视图出奇的慢,在生产环境还好,由于服务器配置较高,没有察觉出来.但是做了一次修改后在开发版 和测试版就直接查询不出结果了.就连select count(1) from 都运行2个小时没有结 ...

  10. css浮动中避免包含元素高度为0的4种解决方法

    问题:当子元素中使用了float时,如果其父元素不指定高度,其高度将为0 解决:清除(闭合)浮动元素,使其父div高度自适应 方法一:额外标签+clear:both     (W3C推荐方法,兼容性较 ...