练手小项目——canvas放大镜效果放大图片

参考：canvas之放大镜效果_WHTGS的博客-CSDN博客_canvas 放大镜

效果：

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>canvas_magnifier</title><link rel="stylesheet" href="canvas_magnifier.css"></head><body><div><canvas width="3000" height="2000" id="canvas1"></canvas><canvas width="1000" height="500" id="canvas2"></canvas></div><script src="canvas_magnifier.js"></script>
</body></html>

div {position: relative;
}
div canvas {position: absolute;left: 0;top: 0;margin: 0 auto;
}
div #canvas2 {border-radius: 50%;box-shadow: 10px 10px #665858;
}

var canvas1 = document.querySelector("#canvas1");
var canvas2 = document.querySelector("#canvas2");
var div = document.querySelector("div");
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');var img = new Image();
img.src = 'graduate2020.png';
img.addEventListener("load", loadHandler);function loadHandler(e) {div.addEventListener("mousemove", mouseHandler)// 2、3参数决定开始剪切的x坐标位置、开始剪切的y坐标位置。// 3、4参数决定被剪切图像的宽度、高度。ctx1.drawImage(img, 0, 0, 3000, 2000);
}function mouseHandler(e) {console.log(e.clientX, e.clientY);canvas2.style.left = e.clientX + 'px';canvas2.style.top = e.clientY + 'px';// 1、2参数决定要清除的矩形左上角的x坐标、y坐标。// 3、4参数决定要清除的矩形的宽度、高度，以像素计。ctx2.clearRect(0, 0, 1000, 500);// 5、6参数决定在画布上放置图像的 x、y 坐标位置。// 7、8参数决定要使用的图像的宽度、高度（伸展或缩小图像）。ctx2.drawImage(img, e.clientX * (img.width / 3000), e.clientY * (img.height / 2000), 1000, 500, 0, 0, 2000, 1000);
}

注意：

使用canvas时出现Uncaught TypeError: Cannot read property ‘getContext‘ of null 错误。

这是因为浏览器还没有加载htnml文件的时候就已经执行了文件。

练手小项目——canvas放大镜效果放大图片相关推荐

练手小项目，爬取3DM图片
博客原文:https://weweweha.com 1. 概述爬取3DM指定网页的游戏壁纸,并且通过多线程来加速爬取图片的速度. 2.使用库 request库用来1解析指定网页,re库用来搜 ...
click 点击图片不起作用_JavaScript 练手小案例：基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...
台式小风扇（HTML+CSS+JS练手小项目）
台式小风扇(HTML+CSS+JS练手小项目) 功能介绍外观展示 HTML代码 CSS代码 JS代码总结功能介绍前段时间看到这样的风扇特效,感觉还挺好玩,就自己也写一个练练手. 风扇有四个档位 ...
springboot+vue练手小项目[前台搭建+后台编写]（非常详细）
[ springboot+vue练手小项目 ] 技术栈: springboot+vue3+element-plus +Mybaties-plus+hutool +mysql8 项目介绍 :最近刚学了s ...
ssm练手小项目_20 个 JavaScript+Html+CSS 练手的小项目
前言: 最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库,里面收集了 20 个 JavaScript+Html+CSS的练手项目,没有使用任何框架,可以让你从基 ...
爬虫练手小项目：豆瓣高分图书TOP100
爬虫练手小项目:豆瓣高分图书TOP100 import requests import re from requests.exceptions import RequestException impo ...
数据结构练手小项目（AVL树、哈希表、循环链表、MySQL数据库）
文章目录前言正文(无删减) 我的想法(删减修改版) 数据导入与数据存储功能实现数据结构用户结构 SIM卡结构 AVL树数据结构哈希表结构数据表用户表 SIM卡表时间安排前言本月主 ...
html+css+js之20个练手小项目（一）
html+css+js之20个练手小项目(一)--Hangman 前言一.HTML 二.CSS 三.JS 前言前端新手练习,记录不迷失. 主要练习html和CSS布局以及JS. 来源github, ...
c语言模拟器怎么打程序,C语言初学者练手小项目——万花模拟器
原标题:C语言初学者练手小项目--万花模拟器还记得小时候玩的万花尺么?好好玩,各种不同的点距能画出各种各样形状图形. C语言程序万花尺模拟函数功能:每隔5秒随机生成万花图形并自动保存作图参数以及 ...

练手小项目——canvas放大镜效果放大图片

练手小项目——canvas放大镜效果放大图片相关推荐

最新文章

热门文章

练手小项目——canvas放大镜效果 放大图片

练手小项目——canvas放大镜效果 放大图片相关推荐

最新文章

热门文章

练手小项目——canvas放大镜效果放大图片

练手小项目——canvas放大镜效果放大图片相关推荐