初遇canvas记录

最新推荐文章于 2024-03-26 16:14:09 发布

原创最新推荐文章于 2024-03-26 16:14:09 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

js有关同时被 2 个专栏收录

4 篇文章

订阅专栏

canvas

1 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas API在canvas中绘制并动态调整图片大小，包括利用range进度条控制图片尺寸，以及获取图片原始尺寸的方法。通过示例代码展示了如何在图片加载完成后进行canvas操作。

比小白还要小白的记录

实现功能
有关知识点总结

实现功能

这里要实现的功能很简单，就是在canvas内插入图片，并且可以配合range进度条调节大小，上面动态生成类似锚点的元素。

img.onload=function(){
	涉及img有关方法必须写在这里
}

有关知识点总结

canvas绘制图片drawImage()

context.drawImage(img,x,y,width,height);

常用参数

img:图片地址

x,y：画布上img的起始位置

width,height：宽高

具体可以参考：参数详解

canvas应该在图片加载后完成

	img=new Image();
    img.src="./img/img.png";
    //图片加载完成之后执行
    img.onload=function() {
        //原始比例与尺寸
        scale=basicwidth/img.width;
        myImage=document.getElementById("myCanvas");
        ctx=myImage.getContext("2d");
        myImage.width=$('#slider').val()*basicwidth;
        myImage.height=scale*img.height;
        ctx.drawImage(img,0,0,myImage.width,myImage.height);
	}

补充一个获取图片原尺寸的方法

//获取图片真实高度
function getImageWidth(url,callback) {
     var img=new Image();
     img.src=url;
     // 如果图片被缓存，则直接返回缓存数据
     if(img.complete) {
        callback(img.width,img.height);
     } else {
            img.onload=function() {
            callback(img.width,img.height);
         }
     }
 }

调用的时候写下面的代码

var imgSrc=$("#image").attr("src");
getImageWidth(imgSrc,function(w,h) {
    nu_width=w;
    nu_height=h;
 });

重置尺寸

// 重置canvas；图片；item大小
function resize(scale) {
    myImage.width=$('#slider').val()*basicwidth;
    myImage.height=scale*img.height;
    ctx.drawImage(img,0,0,myImage.width,myImage.height);
    //重置item的css
    $.each(item,function(zuo_name,zuo_val) {
        itemtop=Math.round(scale*zuo_val['h'])
        itemleft=Math.round(scale*zuo_val['w'])
        $("div[data-item='"+zuo_name+"']").css({'left': itemleft,'top': itemtop,'width': $('#slider').val()*itemw,'height': $('#slider').val()*itemh})
    });
}

在img.onload内调用

$('#slider').on('change',function() {
    scale=$('#slider').val()*basicwidth/img.width;
    // 重置尺寸
    resize(scale);
})