这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 canvas 实现图片根据滑块放大缩小效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
效果图:
图(1) 原始图
图(2) 缩小后
图(3) 放大后
代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>
- </title>
- <style type="text/CSS">
- #canvas1{ box-shadow: 3px 3px 10px black; }
- </style>
- </head>
- <body>
- <canvas id="canvas1" width="500" height="500">
- </canvas>
- <input type="range" name="slider" id="silder" value="0.5" max="1" min="0"
- step="0.01" />
- </body>
- <script type="text/javascript">
- var canvas = document.getElementById("canvas1");
- var context = canvas.getContext("2d");
- var slider = document.getElementById("silder");
- var scale = slider.value;
- creatImg(scale);
- slider.onmousedown = function() {
- slider.onmousemove = function() {
- scale = slider.value;
- creatImg(scale);
- }
- }
- function creatImg(scale) {
- var myImg = new Image();
- myImg.src = "https://gss0.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/902397dda144ad34ac75c376d7a20cf430ad857d.jpg"
- var imgh = canvas.height * scale;
- var imgw = canvas.width * scale;
- var x = canvas.width / 2 - imgw / 2;
- var y = canvas.height / 2 - imgh / 2 myImg.onload = function() {
- context.clearRect(0, 0, canvas.width, canvas.height);
- context.drawImage(myImg, x, y, imgw, imgh)
- }
- }
- </script>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0724/327298.html