<!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. ubuntu下安装迅雷thunder

    迅雷是windows xp下必装的下载工具,作为一款跨协议的下载软件,迅雷的下载速度极其强悍. 那么在ubuntu下能否安装迅雷呢? 到ubuntu中文论坛逛了一圈,发现有现成的wine-thunde ...

  2. ubuntu sublime 破解

    1.去其官方网站http://www.sublimetext.com/ 把linux版下载下来,解开压缩包,放在你希望的路径下. 2.用vim将其打开 . vim sublime_text 3.将文件 ...

  3. BOOST ASIO 学习专贴

    本文已于20170903更新完毕,所有boost asio 代码均为本人手抄.编译器为vs2013,并且所有代码已经上传,本文下方可下载源码 为了学习boost asio库,我是从boost的官方bo ...

  4. 百度地图 ijintui以及七牛、百度编辑器、kindeditor

    密码是明文存储的 sig错误是因为params没拼接上md5后的秘钥,测试时候可以在 Api\Controller\CommonController\_initialize 方法里注释掉效验的代码 代 ...

  5. MySQL慢查询mysqlsla

    转:http://www.osyunwei.com/archives/7659.html 必须在MySQL服务器上安装mysqlsla 1.mysqlsla是perl编写的脚本,运行mysqlsla需 ...

  6. Runway for Mac（UML 流程图绘图工具）破解版安装

    1.软件简介    Runway 是 macOS 系统上一款强大实用的软件开发工具,Runway for Mac 是一个界面简单功能强大的UML设计师.此外,Runway for Mac 带给你所有你 ...

  7. Oracle VPD策略示例

    1.未创建前使用oe用户登录查询: SQL> select * from orders; ORDER_ID ORDER_DATE ORDER_MO CUSTOMER_ID ORDER_STATU ...

  8. Sublime Text增加Build system类型，打造一个全能IDE

    Sublime text2是一款非常方便的文本编辑器,现在我基本上不用IDE去编写代码,一般都是在Sublime text2中编辑,当然,这里无法执行.debug是软肋,于是上网找了下资料,可以把添加 ...

  9. SNF平台从sql server兼容oracle的处理方式和开发方式

    前几天有这样一个需求,就是让SNF平台BS版的基础程序全面支持Oracle数据库. 初一看这是一个很大的工程,因为大家都知道 Sql和Oracle的语法有很多的不一样,如 top .日期获取.类型之间 ...

  10. 使用Talend Open Studio将数据分步从oracle导入到hive中

    先使用Tos建立模型,将Oracle中的数据导入到本地: build job后,形成独立可以运行的程序: 将生成的zip文件,上传到hadoop集群上,有hive环境的机器上: [hive@h1 wo ...