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

不能自己适应,就只能每次外部容器发生改变的时候给它重新设置大小了。

1、  $(selector).resize()—布局调整大小的时候触发

  查了查jquery好像有resize函数,顿时很惊喜,然而发现并没有什么用,它只支持$(window).resize(function(){});在某些情况这个就够用了,但是之前我明显用不了。

  刚好查到了一个自定义的resize()函数,但是由于过去有点久,又没有留下记录,不知道是谁的代码了,是基于jq的代码。如下:

//监听div大小变化

(function($, h, c) {

var a = $([]),

e = $.resize = $.extend($.resize, {}),

i,

k = "setTimeout",

j = "resize",

d = j + "-special-event",

b = "delay",

f = "throttleWindow";

e[b] = 250;

e[f] = true;

$.event.special[j] = {

           setup: function() {

                    if (!e[f] && this[k]) {

                             return false;

                    }

                    var l = $(this);

                    a = a.add(l);

                    $.data(this, d, {

                             w: l.width(),

                             h: l.height()

                    });

                    if (a.length === 1) {

                             g();

                    }

           },

           teardown: function() {

                    if (!e[f] && this[k]) {

                             return false;

                    }

                    var l = $(this);

                    a = a.not(l);

                    l.removeData(d);

                    if (!a.length) {

                             clearTimeout(i);

                    }

           },

           add: function(l) {

                    if (!e[f] && this[k]) {

                             return false;

                    }

                    var n;

                    function m(s, o, p) {

                             var q = $(this),

                             r = $.data(this, d);

                             r.w = o !== c ? o: q.width();

                             r.h = p !== c ? p: q.height();

                             n.apply(this, arguments);

                    }

                    if ($.isFunction(l)) {

                             n = l;

                             return m;

                    } else {

                             n = l.handler;

                             l.handler = m;

                    }

           }

};

function g() {

           i = h[k](function() {

                    a.each(function() {

                             var n = $(this),

                             m = n.width(),

                             l = n.height(),

                             o = $.data(this, d);

                             if (m !== o.w || l !== o.h) {

                                       n.trigger(j, [o.w = m, o.h = l]);

                             }

                    });

                    g();

           },

           e[b]);

}

})(jQuery, this);

resize.js

2、  更改canvas的大小

  canvas.width和canvas.height是canvas本身的属性,可以直接赋值修改。但是修改canvas的大小的同时会导致canvas内容的丢失,你需要保存原本的canvas的信息,然后再将信息放到已经改变好大小的canvas上,有下面两种方法。

  <1>toDataURL() + new Image() + drawImage()

获取图像的base64信息,然后利用构造新的图像对象和ctx.drawImage(img, 0, 0, newwidth, newheight)进行缩放,也支持scale()缩放。

    a)不使用scale()

var base64 = c.toDataURL();

c.width=contain.offsetWidth;//父元素的大小

c.height=contain.offsetHeight;

var img = new Image();

img.onload = function(){

           ctx.drawImage(img,0,0,c.width,c.height);//进行缩放

}

img.src = base64;

    b)使用scale()

var base64 = c.toDataURL();

c.width=contain.offsetWidth;

c.height=contain.offsetHeight;

ctx.scale(c.width/width,c.height/height);//进行缩放,width/height是原canvas的大小

var img = new Image();

img.onload = function(){

           ctx.drawImage(img,0,0,width,height);

}

img.src = base64;

这个方法比较好,但是受同源限制,单单跑html的时候如果想要对加载了图片的canvas进行操作可不行,需要跑到http上。

2、getImageData() + putImageData()

保存像素矩阵,然后把像素矩阵放到新画布上,不会缩放,也不受scale()影响。如果要等比例缩放,需要自己对像素矩阵进行操作。同样受同源限制。

                        var data=ctx.getImageData(0,0,width,height);

                                       var base64 = c.toDataURL();

                                       c.width=contain.offsetWidth;

                                       c.height=contain.offsetHeight;

                                       ctx.putImageData(data,0,0);

完整代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<script src='js/jquery-3.3.1.min.js'></script>
<script src='js/resize.js'></script>
<style>
body{
//background:black;
text-align:center;
}
#myCanvas{
background:white;
border:1px solid black;
}
#contain{
margin:0 auto;
width:30%;
height:40px; }
#scream{
width:100%;
}
img{
margin-top:10px;
border:1px solid red;
} </style>
</head>
<body>
<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;//***根据容器大小设置宽和高 /****如果是本地图片绘制的img受同源限制,报错
var img= new Image();
img.onload=function(){
ctx.drawImage(img,0,0);
var data = ctx.getImageData(0,0,2,2);//获取像素点
console.log(data); }
img.src="img/6.png";
//*/
//****不能用图片展示,画个对角线试试
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(c.width,c.height);
ctx.stroke();
ctx.closePath();
//容器大小发生改变触发
$('#contain').resize(function(){
var width = c.width;
var height = c.height;
var data=ctx.getImageData(0,0,width,height);//获取像素点
var base64 = c.toDataURL();//获取base64
c.width=contain.offsetWidth;
c.height=contain.offsetHeight;
//ctx.scale(c.width/width,c.height/height);
//ctx.putImageData(data,0,0);//放置像素矩阵,不会缩放,超出部分会丢失
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0,c.width,c.height);//利用base64图像进行缩放
//ctx.drawImage(img,0,0,width,height);
}
img.src = base64; }); });
</script>
</body>
</html>

参考:

同源限制:

https://blog.csdn.net/u013040887/article/details/78986598

有关Canvas的一点小事—canvas和resize的更多相关文章

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

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

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

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

  3. 有关Canvas的一点小事—图像绘制

    1.  使用canvas绘制图像 什么是图像?在js中它就是一个<img src=””>,<img>有两种接收图像信息的方法,一个是直接链接到图像地址,一个使用base64数据 ...

  4. 【canvas系列】用canvas实现一个colorpicker

    每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...

  5. 【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)

    每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...

  6. Canvas学习:封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

  7. canvas学习笔记:canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

  8. canvas画画板,canvas画五角星,canvas制作钟表、Konva写钟表

    制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...

  9. canvas一周一练 -- canvas基础学习

    从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳_┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...

随机推荐

  1. 客户端运行gpupdate /force,后提示原因是缺少到域控制器的网络连接

    问题: C:\Users\wb>gpupdate /force正在更新策略... 用户策略更新成功完成.无法成功更新计算机策略.遇到下列错误: 处理组策略失败,原因是缺少到域控制器的网络连接.这 ...

  2. 使用Excel VBA(快捷键)(加菜单)

    将excel宏安全性调到中: 按alt+f11进入vba编辑器: 记住以下快捷键: F7 代码窗口 F4 属性窗口 ctrl+R 工程资源窗口 F5 程序运行 TAb 代码缩进 SHIFT+TAB  ...

  3. angular实现简单的pagination分页组件

    不想使用第三方库,只想使用一个分页器,那么就简单的实现一个,效果如下: 1.使用方式: <custom-pagination *ngIf="enterpriseList.length& ...

  4. SpringBoot与SpringCloud的区别

    1.Spring boot 是 Spring 的一套快速配置脚手架,可以基于spring boot 快速开发单个微服务:Spring Cloud是一个基于Spring Boot实现的云应用开发工具: ...

  5. 【转】Flash AS3.0 中的自定义事件

    原文 http://www.cnblogs.com/acpp/archive/2010/10/19/1855670.html package { import flash.events.Event; ...

  6. ArcGIS Engine能够做什么?

    转自原文ArcGIS Engine能够做什么? ArcGIS Engine是一组跨平台的嵌入式ArcObjects,它是ArcGIS软件产品的底层组件,用来构建定制的GIS和桌面制图应用程序,或是向原 ...

  7. Rails + rabl

    当我们使用rails generate scaffold的方式生成MVC的时候,rails会自己主动给我们生成一系列的文件,包含了怎样用json显示model的view.这样事实上默认了你的系统是一个 ...

  8. Intersection between 2d conic in OpenCASCADE

    Intersection between 2d conic in OpenCASCADE eryar@163.com Abstract. OpenCASCADE provides the algori ...

  9. 如何使用jquery判断一个元素是否含有一个指定的类(class)

    如何使用jquery判断一个元素是否含有一个指定的类(class) 一.总结 一句话总结:可以用hasClass方法(专用)和is方法 1.is(expr|obj|ele|fn)的方法几个参数表示什么 ...

  10. 为root账户更名

    为root账户更名 处于安全考虑许多管理员想把root更名,具体方法如下: 1.先以root登陆系统 2.用vi 编辑/etc/passwd文件,将第一行的第一个root修改为你想要的账户名,然后保存 ...