<!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. iOS App转让流程详情教程篇

    最近对公司旗下两款app进行转让,正好记一下操作流程: 1.登录iTunes发布网站,找到app,查看App信息下方有个[转让 App] 按钮. 2.点进去,是如下界面,里面包含是否满足转让条件,理论 ...

  2. iOS设置圆角的四种方法

    小小圆角问题,正常情况下,我们不需要过多关心,但当屏幕内比较多的时候,还是有必要了解下性能问题的 一.设置CALayer的cornerRadius 这是最常用的,也是最简单的. cornerRadiu ...

  3. linux shell 脚本攻略学习11--mkdir和touch命令详解

    一.创建目录(mkdir命令详解) amosli@amosli-pc:~/learn$ mkdir dir amosli@amosli-pc:~/learn/dir$ mkdir folder amo ...

  4. angularJS实现无刷新文件下载

    $scope.getExcel = function () { $http.post("/production/statistics/export", { storeId: $sc ...

  5. rabbitMQ概念详细介绍

    1. 历史 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然在同步消息通讯的世界里有 ...

  6. MySQL高可用性大杀器之MHA

    MySQL高可用性大杀器之MHA   提到MySQL高可用性,很多人会想到MySQL Cluster,亦或者Heartbeat+DRBD,不过这些方案的复杂性常常让人望而却步,与之相对,利用MySQL ...

  7. Git 远程仓库（分布式版本控制系统）

    前言 远程仓库是指托管在因特网或其他网络中的你的项目的版本库.你可以有好几个远程仓库,通常有些仓库对你只读,有些则可以读写. 1.查看远程仓库 如果想查看你已经配置的远程仓库服务器,可以运行 git ...

  8. 解决Clover在win 10下的兼容问题

    周五闲的蛋疼,把系统升级到win10.周一早上过来,发现Clover 无法使用了,各种崩溃,查阅了官网,发现Clover确实只兼容到win8.网络上给出解决方案的确是用qttabbar,qttabba ...

  9. git web开发版本管理

    使用git来管理web开发: 我们需要做的事情 : 1,在服务器建立版本仓库: 2,在服务器建立稳定版本的站点,编写版本仓库的hooks: 3,在开发服务器上提交开发版本: 下面一步一步来:(注意建立 ...

  10. MongoDB学习笔记（11） --- 聚合

    MongoDB中聚合(aggregate)主要用于处理数据(诸如统计平均值,求和等),并返回计算后的数据结果.有点类似sql语句中的 count(*) aggregate() 方法 MongoDB中聚 ...