1、  使用canvas绘制图像

什么是图像？在js中它就是一个<img src=””>，<img>有两种接收图像信息的方法，一个是直接链接到图像地址，一个使用base64数据，不过这里讨论的是canvas要使用的Image对象。我们有两个方式定义：

<1>在html中定义好，然后根据id获取

var img=document.getElementById("scream");

<2>新建image对象

var img = new Image();

img.onload = function(){//在这里面进行对图像对象的操作

　　ctx.drawImage(img,0,0);         

};

img.src = 'img/6.png';

得到img对象后，我们有三种方式在canvas上绘制你想要的图像。

<1>只定义开始绘制的坐标，图像的宽和高取决于原图像文件的大小

   ctx.drawImage(img,10,10);//***第一种，三个参数分别是Image,绘制开始的x,y

<2>定义开始的坐标，和绘制的宽和高

ctx.drawImage(img,100,100,width,height);//***第二种，三个参数分别是Image,绘制开始的x,y和拉伸的宽度高度

<3>切割原图片，并绘制到canvas的制定位置

  ctx.drawImage(img,sx,sy,sw,sh,200,80,sw,sh);//***第三种，三个参数分别是Image,切割原图的开始坐标和宽高，绘制开始的x,y和拉伸的宽度高度

附完整的代码：

<!DOCTYPE html>

<html lang="zh-cn">

    <head>

        <meta charset="UTF-8"/>

        <script src='js/jquery-3.3.1.min.js'></script>

        <style>

            body{

                background:black;

                text-align:center;

            }

            #myCanvas{

                background:white;

            }

            #contain{

                width:100%;

                height:600px;

            }

            #scream{

                width:100%;

            }

        </style>

    </head>

    <body>

        <img src="img/7.png" id="scream" hidden>

        <div id="contain">

            <canvas id="myCanvas"></canvas>

        </div>

        <script type="text/javascript">

            $(document).ready(function(){

                var contain = document.getElementById('contain');

                var c=document.getElementById("myCanvas");

                var ctx=c.getContext("2d");

                c.width=contain.offsetWidth;

                c.height=contain.offsetHeight;//***根据容器大小设置宽和高

                /*从dom元素中获取图像*/

                var img=document.getElementById("scream");

                ctx.drawImage(img,10,10);//***第一种，三个参数分别是Image,绘制开始的x,y

                var width = img.width;

                /*新建一个图像元素*/

                var img = new Image();

                img.onload = function(){

                    var sw = img.width;

                    var sh = img.height;

                    var height = width*sh*1.0/sw;

                    ctx.drawImage(img,100,100,width,height);//***第二种，三个参数分别是Image,绘制开始的x,y和拉伸的宽度高度

                    var sx = sw-width;

                    var sy = sh-height;

                    ctx.drawImage(img,sx,sy,sw,sh,200,80,sw,sh);//***第三种，三个参数分别是Image,切割原图的开始坐标和宽高，绘制开始的x,y和拉伸的宽度高度

                    /*后面设置的是原图的宽和高，并不是切割出来的部分的宽和高，需要转换*/

                };

                img.src = 'img/6.png';//*这个图像请比第一个大一点，最好大很多

            });

        </script>

    </body>

</html>

canvas绘制图像

参考：

Js中获取各种宽度高度的问题：

https://www.cnblogs.com/wangkongming/p/6195903.html

有关Canvas的一点小事—图像绘制的更多相关文章

  1. 有关Canvas的一点小事--鼠标绘图

    1.  如何根据鼠标位置获取canvas上对应位置的x,y. 2.  canvas的图糊了,设置宽和高的方式不对. 3.鼠标绘图代码 之前听说过canvas这个元素,但是实际上并没有深入了解过.不过日 ...

  2. 有关Canvas的一点小事—canvas和resize

     之前就说了canvas设置大小的时候用的就是设置实打实的像素值,像图像一样设置百分比然后根据浏览器大小自己适应大小是不可能的——当然一般也不会想要cavans改变大小.不过项目之前有用到过,既然去了 ...

  3. 有关Canvas的一点小事—canvas数据和像素点

    1.  canvas生成base64数据 canvas.toDataURL()生成的数据可以直接给image对象使用作为<img>显示在前端,也可以传给后台生成图片保存.前端生成保存图片的 ...

  4. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

  5. HTML5 -canvas拖拽、移动 绘制图片可操作移动，拖动

    关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开 ...

  6. IOS第16天(1,Quartz2D基本图像绘制）

    ***************基本图像绘制 画线 #import "HMLineView.h" @implementation HMLineView - (id)initWithF ...

  7. canvas学习总结三：绘制路径-线段

    Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...

  8. canvas学习总结六：绘制矩形

    在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...

  9. iOS：quartz2D绘图（处理图像,绘制图像并添加水印）

    绘制图像既可以重写drawRect:方法并在该方法中绘制,也可以不用重写该方法,它有封装好的函数获取自己的图像绘制上下文,即UIGraphicsBeginImageContext(CGSize siz ...

随机推荐

  1. hibernate generator id

    以下内容整理自网络 “assigned” 主键由外部程序负责生成,在   save()   之前指定一个.  “hilo” 通过hi/lo   算法实现的主键生成机制,需要额外的数据库表或字段提供高位 ...

  2. 转:Java读写文件各种方法及性能比较

    干Java这么久,一直在做WEB相关的项目,一些基础类差不多都已经忘记.经常想得捡起,但总是因为一些原因,不能如愿. 其实不是没有时间,只是有些时候疲于总结,今得空,下定决心将丢掉的都给捡起来. 文件 ...

  3. Spatial Pyramid Matching

    转自:http://blog.csdn.net/jwh_bupt/article/details/9625469 SPM 全称是Spatial Pyramid Matching,出现的背景是bag o ...

  4. SSH—指定登录的IP

    设置ssh安全--指定的IP登陆 为了服务器更加具有安全性,我们可以设置ssh安全只允许用户从固定的IP进行登陆, 首先获取要登录服务器的电脑的IP地址 登录http://www.ip138.com/ ...

  5. TCP简单说（下）

    本文在Creative Commons许可证下发布 TCP的RTT算法 从前面的TCP重传机制我们知道Timeout的设置对于重传非常重要. 设长了,重发就慢,丢了老半天才重发,没有效率,性能差: 设 ...

  6. 【VC++学习笔记三】控件自绘

    MFC应用程序中,大部分的控件类型都已经被定制好了,即便是修改,也只是小范围内的修改,而很多情况下,我们又需要对界面进行特殊定制,这时,最好的办法就是用CWnd类进行派生,自己生成新的窗体,在WM_P ...

  7. HDU——T 1075 What Are You Talking About

    http://acm.hdu.edu.cn/showproblem.php?pid=1075 Time Limit: 10000/5000 MS (Java/Others)    Memory Lim ...

  8. 正确地在QML应用中使用fontsize

    我们知道我们有时须要显示text文本.可是,在QML应用中.我们应该怎样选择font的大小呢?在今天的这篇文章中,我们将展示在Ubuntu平台中的不同文字的大小.我们能够通过FontUtils来帮我们 ...

  9. 40.Node.js Web 模块

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 什么是 Web 服务器? Web服务器一般指网站服务器,是指驻留于因特网上某种类型计 ...

  10. Cloudera Hue是什么?

     Hue是cdh专门的一套web管理器,它包括3个部分hue ui,hue server,hue db.hue提供所有的cdh组件的shell界面的接口.你可以在hue编写mr,查看修改hdfs的文件 ...