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. BFC 和 haslayout

    在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很 ...

  2. angular4自定义组件非input元素实现ngModel双向数据绑定

    在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定,如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐... ...

  3. 使用 HTML5 canvas制作拾色器

    自制的拾色器漂亮吧,哈哈 废话不多说直接上代码,希望可以帮到需要的朋友 <html><head>    <style>        .canvas_color{p ...

  4. Asp.Net Core 之 appsettings.json

    原文:Asp.Net Core 之 appsettings.json appsettings.json是什么? 相信大家在.Net Framework的项目都会用的web.config,app.con ...

  5. Swift学习笔记(4)--字符串及基本使用

    String是例如“hello, world”,“海贼王” 这样的有序的Character(字符)类型的值的集合,通过String类型来表示. Swift 的String类型与 Foundation  ...

  6. vector要注意的点

    vector的元素类别T,必须具备assignable和copyable两个性质. vector的容量很重要: 1. 一旦内存重新配置,和vector元素相关的所有references.pointer ...

  7. 改动UINavigationBar （导航栏）上NavigationBarItem 的字体大小和颜色的用法

    //创建一个左边button UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle:@"<" ...

  8. scaleType-模拟按钮加文字整天点击效果

    经常碰到这种情况,就是一个按钮下面有文字,我们点击按钮的时候,按钮跟文字的背景都是同时变化的.我们看下下面的效果 点击以后如下 如果想要实现这个方法,网上有很多的方法,主要就是自定义控件,或者是使用t ...

  9. Android圆形图片不求人，自定义View实现（BitmapShader使用）

    在很多APP当中,圆形的图片是必不可少的元素,美观大方.本文将带领读者去实现一个圆形图片自定View,力求只用一个Java类来完成这件事情. 一.先上效果图 二.实现思路 在定义View 的onMea ...

  10. POJ 1988 带偏移量的并查集

    题意: 思路: 数据范围很大 貌似只能用并查集了-- //By SiriusRen #include <cstdio> using namespace std; int p,f[33333 ...