<!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. 使用jupyterthemes插件定制jupyter notebook界面

    jupyter notebook界面是可以定制的,定制位置在:C:\anaconda\Lib\site-packages\notebook\static\custom. 启动jupyter noteb ...

  2. 微信小程序-从零开始制作一个跑步微信小程序

    来源:伯乐在线 - 王小树 链接:http://ios.jobbole.com/90603/ 点击 → 申请加入伯乐在线专栏作者 一.准备工作 1.注册一个小程序账号,得用一个没注册过公众号的邮箱注册 ...

  3. 运维自动化之Cobbler系统安装使用详解[good]

    一.简介 Cobbler是一个快速网络安装linux的服务,而且在经过调整也可以支持网络安装windows.该工具使用python开发,小巧轻便(才15k行python代码),使用简单的命令即可完成P ...

  4. 【MyBatis】MyBatis之分页

    关于MyBatis的搭建可以参见“MyBatis的配置”,MyBatis是对JDBC底层代码的封装,关于Oracle.MySQL.SqlServer的分页可以查看Oracle.SqlServer.My ...

  5. 【webservice】使用命令wsimport构建WebService客户端

    wsimport命令介绍 在JDK的bin文件夹中,有一个wsimport.exe,这个工具依据wsdl文件生成相应的类文件,然后用这些类文件,就可以像调用本地的类一样调用WebService提供的方 ...

  6. TCP连接的TIME_WAIT过多导致 Tomcat 假死

    最近发现使用的Tomcat 7会经常假死.前端点击页面无任何反应,打开firebug,很多链接一直在等待服务器的反应.查看服务器的状态,CPU占用很少,最多不超过10%,一般只有2%,3%左右,内存占 ...

  7. Fragment使用具体解释

    fragment是Google在3.0版本号中推出的新功能,如今已经增加到V4包中,假设要使用V4兼容包中的Fragment须要将Activity换成FragmentActivity,调用的getSu ...

  8. 替代crontab，任务计划统一集中管理系统cronsun简介

    一.背景 crontab 是 Linux 系统里面最简单易用的定时任务管理工具,相信绝大多数开发和运维都用到过.在咱们公司,很多业务系统的定时任务都是通过 crontab 来定义的,时间长了后会发现存 ...

  9. 复杂对象类型的WebService高级部分

    从客户端除了传递字符串以外还可以传递复杂对象(对象必须序列化了),List,Map,数组和文件. (1)定义一个对象实现了serializable 接口package cn.com.chenlly.s ...

  10. SQL 正则表达式 `(user_log_acct)?+.+`

    SELECT 语句可以使用正则表达式做列选择,下面的语句查询除了 ds 和 hr 之外的所有列: SELECT `(ds|hr)?+.+` FROM test