hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

canvas离屏手艺与放大镜完成代码示例【html5教程】

2019-11-26HTML搜搜PHP网72°c
A+ A-
这篇文章重要引见了canvas离屏手艺与放大镜完成代码示例的相干材料,有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你们有所协助。

运用 canvas 除了能够完成滤镜,还能够运用 离屏手艺 放大镜功用。

为了轻易解说,本文分为 2 个运用部份:

  • 完成水印和中间缩放

  • 完成放大镜

1. 什么是离屏手艺?

canvas 进修和滤镜完成 引见过 drawImage 接口。除了绘制图象,这个接口还能够: 将一个 canvas 对象绘制到另一个 canvas 对象上 。这就是离屏手艺。

2. 完成水印和中间缩放

在代码中,有两个 canvas 标签。分别是可见与不可见。 不可见的 canvas 对象上的 Context 对象,就是我们安排图象水印的处所。

更多详解,请看代码解释:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learn Canvas</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      border: 1px solid #222;
    }

    input {
      display: block;
      margin: 20px auto;
      width: 800px
    }
  </style>
</head>
<body>
  <p id="app">
    <canvas id="my-canvas"></canvas>
    <input type="range" value="1.0" min="0.5" max="3.0" step="0.1">
    <canvas id="watermark-canvas" style="display: none;"></canvas>
  </p>
  <script type="text/javascript">
    window.onload = function () {
      var canvas = document.querySelector("#my-canvas")
      var watermarkCanvas = document.querySelector("#watermark-canvas")
      var slider = document.querySelector("input")

      var scale = slider.value

      var ctx = canvas.getContext('2d')
      var watermarkCtx = watermarkCanvas.getContext("2d")

      /* 给第二个canvas猎取的Context对象增加水印 */
      watermarkCanvas.width = 300
      watermarkCanvas.height = 100
      watermarkCtx.font = "bold 20px Arial"
      watermarkCtx.lineWidth = "1"
      watermarkCtx.fillStyle = "rgba(255 , 255 , 255, 0.5)"
      watermarkCtx.fillText("=== yuanxin.me ===", 50, 50)
      /****************************************/

      var img = new Image()
      img.src = "./img/photo.jpg"

      /* 加载图片后实行操纵 */
      img.onload = function () {
        canvas.width = img.width;
        canvas.height = img.height;
        drawImageByScale(canvas, ctx, img, scale, watermarkCanvas);
        // 监听input标签的mousemove事宜
        // 注重:mousemove及时监听值的变化,内存斲丧较大
        slider.onmousemove = function () {
          scale = slider.value
          drawImageByScale(canvas, ctx, img, scale, watermarkCanvas);
        }
      }
      /******************/
    }
    /**
    *
    * @param {Object} canvas 画布对象
    * @param {Object} ctx
    * @param {Object} img
    * @param {Number} scale 缩放比例
    * @param {Object} watermark 水印对象
    */
    function drawImageByScale(canvas, ctx, img, scale, watermark) {
      // 图象根据比例举行缩放
      var width = img.width * scale,
        height = img.height * scale
      // (dx, dy): 画布上绘制img的肇端坐标
      var dx = canvas.width / 2 - width / 2,
        dy = canvas.height / 2 - height / 2
      ctx.clearRect(0, 0, canvas.width, canvas.height) // No1 清空画布
      ctx.drawImage(img, dx, dy, width, height) // No2 从新绘制图象
      if (watermark) {
        // No3 推断是不是有水印: 有, 绘制水印
        ctx.drawImage(watermark, canvas.width - watermark.width, canvas.height - watermark.height)
      }
    }
  </script>
</body>
</html>

完成结果以下图所示:

拖动滑竿,即可放大和减少图象。然后右键保留图象。保留后的图象,就有已经有了水印,以下图所示:

3. 完成放大镜

在上述中间缩放的基础上,完成放大镜主须要注重以下 2 个部份:

  • 细化处置惩罚canvas的鼠标相应事宜:滑入、滑出、点击和松开

  • 从新盘算离屏坐标(细致公式盘算思绪请见代码解释)

  • 从新盘算鼠标相对于 canvas 标签的坐标(细致公式盘算思绪请见代码解释)

代码以下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      border: 1px solid #222;
    }
  </style>
</head>
<body>
  <canvas id="my-canvas"></canvas>
  <canvas id="off-canvas" style="display: none;"></canvas>
  <script>
    var isMouseDown = false,
      scale = 1.0
    var canvas = document.querySelector("#my-canvas")
    var offCanvas = document.querySelector("#off-canvas") // 离屏 canvas
    var ctx = canvas.getContext("2d")
    var offCtx = offCanvas.getContext("2d") // 离屏 canvas 的 Context对象
    var img = new Image()

    window.onload = function () {
      img.src = "./img/photo.jpg"

      img.onload = function () {
        canvas.width = img.width
        canvas.height = img.height

        offCanvas.width = img.width
        offCanvas.height = img.height

        // 盘算缩放比例
        scale = offCanvas.width / canvas.width

        // 初识状态下, 两个canvas均绘制Image
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
        offCtx.drawImage(img, 0, 0, canvas.width, canvas.height)

      }

      // 鼠标按下
      canvas.onmousedown = function (event) {
        event.preventDefault() // 禁用默许事宜
        var point = windowToCanvas(event.clientX, event.clientY) // 猎取鼠标相对于 canvas 标签的坐标
        isMouseDown = true
        drawCanvasWithMagnifier(true, point) // 绘制在离屏canvas上绘制放大后的图象
      }

      // 鼠标挪动
      canvas.onmousemove = function (event) {
        event.preventDefault() // 禁用默许事宜
        if (isMouseDown === true) {
          var point = windowToCanvas(event.clientX, event.clientY)
          drawCanvasWithMagnifier(true, point)
        }
      }

      // 鼠标松开
      canvas.onmouseup = function (event) {
        event.preventDefault() // 禁用默许事宜
        isMouseDown = false
        drawCanvasWithMagnifier(false) // 不绘制离屏放大镜
      }

      // 鼠标移出canvas标签
      canvas.onmouseout = function (event) {
        event.preventDefault() // 禁用默许事宜
        isMouseDown = false
        drawCanvasWithMagnifier(false) // 不绘制离屏放大镜
      }
    }

    /**
    * 返回鼠标相对于canvas左上角的坐标
    * @param {Number} x 鼠标的屏幕坐标x
    * @param {Number} y 鼠标的屏幕坐标y
    */
    function windowToCanvas(x, y) {
      var bbox = canvas.getBoundingClientRect() // bbox中存储的是canvas相对于屏幕的坐标
      return {
        x: x - bbox.x,
        y: y - bbox.y
      }
    }

    function drawCanvasWithMagnifier(isShow, point) {
      ctx.clearRect(0, 0, canvas.width, canvas.height) // 清空画布
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // 在画布上绘制图象

      /* 运用离屏,绘制放大镜 */
      if (isShow) {
        var { x, y } = point

        var mr = 50 // 正方形放大镜边长

        // (sx, sy): 待放大图象的最先坐标
        var sx = x - mr / 2,
          sy = y - mr / 2

        // (dx, dy): 已放大图象的最先坐标
        var dx = x - mr,
          dy = y - mr

        // 将offCanvas上的(sx,sy)最先的长宽均为mr的正方形地区
        // 放大到
        // canvas上的(dx,dy)最先的长宽均为 2 * mr 的正方形可视地区
        // 由此完成放大结果
        ctx.drawImage(offCanvas, sx, sy, mr, mr, dx, dy, 2 * mr, 2 * mr)
      }
      /*********************/
    }
  </script>
</body>
</html>

放大镜结果以下图所示(被红笔标出的地区就是我们的正方形放大镜):

总结:以上就是本篇文的全部内容,愿望能对人人的进修有所协助。更多相干教程请接见Html5视频教程!

相干引荐:

php公益培训视频教程

HTML5图文教程

HTML5在线手册

以上就是canvas离屏手艺与放大镜完成代码示例的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
canvas离屏手艺与放大镜完成代码示例【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章