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. HDU 4847 Wow! Such Doge!

    Wow! Such Doge! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  2. Linux常用截图软件

    1.Gnome-screenshot 是一款 GNOME 截图工具,顾名思义,它是一款用来对整个屏幕.一个特定的窗口或者用户所定义一些其他区域进行捕获的工具.该工具提供了几个其他的功能,包括对所捕获的 ...

  3. Python正则表达式初识（十）附正则表达式总结

    今天分享正则表达式最后一个特殊字符“\d”,具体的教程如下. 1.特殊字符“\d”十分常用,其代表的意思是数字.代码演示如下图所示. 其中“+”的意思是表示连续,在这里代表的意思是连续的数字.但是输出 ...

  4. zip-tar

    1.zip 制作压缩文件 (1)格式:zip 压缩文件名 文件1 文件2... zip文件不能用cat查看 (2)选项: -r:用来压缩目录 2.unzip 解压缩文件 (1)格式:unzip 压缩文 ...

  5. 洛谷 P1360 [USACO07MAR]黄金阵容均衡Gold Balanced L…

    P1360 [USACO07MAR]黄金阵容均衡Gold Balanced L… 题目描述 Farmer John's N cows (1 ≤ N ≤ 100,000) share many simi ...

  6. Android设计模式（七）－－原型模式

    1.定义: 用原型实例指定创建对象种类,并通过拷贝这些原型创建新的对象. 2.目的: 从一个对象创建另外一个可定制的对象,而不须要知道不论什么创建细节. 3.作用: 3.1.简化对象的创建. 3.2 ...

  7. 【iOS开发-88】事件传递原理解释哪个控件处理事件以及响应者链条的介绍

    一.触摸事件传递原理 (1)大的方向是:从父控件传递给子控件. --父控件会先检查自己能否接受事件的处理 --然后再看看触摸在不在自己的范围内 --假设在的话,就遍历子控件.看看有没有合适的子控件能够 ...

  8. ZOJ 3690 &amp; HDU 3658 （矩阵高速幂+公式递推）

    ZOJ 3690 题意: 有n个人和m个数和一个k,如今每一个人能够选择一个数.假设相邻的两个人选择同样的数.那么这个数要大于k 求选择方案数. 思路: 打表推了非常久的公式都没推出来什么可行解,好不 ...

  9. OpenCASCADE解非线性方程组

    OpenCASCADE解非线性方程组 eryar@163.com Abstract. 在科学技术领域里常常提出求解非线性方程组的问题,例如,用非线性函数拟合实验数据问题.非线性网络问题.几何上的曲线曲 ...

  10. 深入理解 GRE tunnel

    深入理解 GRE tunnel 时间 2012-11-08 19:05:22  A Geek's Page 原文  http://wangcong.org/blog/archives/2149 主题  ...