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. Linux常用PDF阅读软件

    1.福昕阅读器是一款PDF文档阅读器,对中文的支持度非常高.福昕阅读器作为全球最流行的PDF阅读器,能够快速打开.浏览.审阅.注释.签署及打印任何PDF文件. 2.evince是一个支持多种格式的文件 ...

  2. 【转】一篇关于32位Linux内核使用大内存的文章——Hugemem Kernel Explained  &nb

    红旗DC系列Linux操作系统(x86平台)中带有四类核心: UP (支持单内核) SMP (支持多内核) hugemem Icc* (用intel C编译器编译的核心) 其中hugemem核心往往引 ...

  3. SWFupload多图片上传入门教程

    本文为转载内容,但所讲内容亲身试验证明可用,转载过来希望能帮助到有需要的人. 转载地址:http://blog.csdn.net/kongjiea/article/details/24290373#c ...

  4. MYSQL查询数据中通讯最多的两个人

    SELECT GREATEST( sender_id, recipient_id ) , LEAST( sender_id, recipient_id ) , COUNT( * ) AS aFROM ...

  5. Swift学习笔记(9)--闭包

    1.闭包表达式: { (parameters) -> returnType in statements } 注1.闭包表达式语法可以使用常量.变量和inout类型作为参数,不提供默认值. 也可以 ...

  6. HDU 1668 Islands and Bridges

    Islands and Bridges Time Limit: 4000ms Memory Limit: 65536KB This problem will be judged on HDU. Ori ...

  7. LintCode 二叉树的遍历 （非递归）

    前序: class Solution { public: /** * @param root: The root of binary tree. * @return: Preorder in vect ...

  8. Linux经常使用命令(十六) - whereis

    whereis命令仅仅能用于程序名的搜索(程序安装在哪?).并且仅仅搜索二进制文件(參数-b).man说明文件(參数-m)和源码文件(參数-s). 假设省略參数,则返回全部信息. 和find相比.wh ...

  9. .Net接口调试与案例

    1.通过查看日志,可以看出问题的原因. 2.断点调试. 3.本地测试,确保无误后,线上测试. 4.输出测试. 通过get的方式,测试接口. // [HttpPost] public ActionRes ...

  10. typeof 和 instanceof 的区别

    在JavaScript中我们想得到一个变量的类型,我们一般会用typeof 得到这个类型的 字符串,但是对于引用类型,typeof始终会返回一个"object",在我们js中有十个 ...