扣丁学堂HTML5培训简述什么是canvas离屏技术及实现水印的操作

Francismingren

2019-04-24

关注关注

本篇文章扣丁学堂HTML5培训小编给喜欢HTML5培训的小伙伴们分享一下什么是canvas离屏技术及实现水印的操作，对HTML5开发技术感兴趣的小伙伴就随小编一起了解一下吧。

扣丁学堂HTML5培训简述什么是canvas离屏技术及实现水印的操作

扣丁学堂HTML5培训

1、什么是离屏技术?

canvas学习和滤镜实现介绍过drawImage接口。除了绘制图像，这个接口还可以：将一个canvas对象绘制到另一个canvas 对象上。这就是离屏技术。

2、实现水印和中心缩放

在代码中，有两个canvas标签。分别是可见与不可见。不可见的canvas对象上的Context对象，就是我们放置图像水印的地方。

更多详解，请看代码注释：

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Learn Canvas&lt;/title&gt;
 &lt;style&gt;
 canvas {
 display: block;
 margin: 0 auto;
 border: 1px solid #222;
 }
 input {
 display: block;
 margin: 20px auto;
 width: 800px
 }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div id="app"&gt;
 &lt;canvas id="my-canvas"&gt;&lt;/canvas&gt;
 &lt;input type="range" value="1.0" min="0.5" max="3.0" step="0.1"&gt;
 &lt;canvas id="watermark-canvas" style="display: none;"&gt;&lt;/canvas&gt;
 &lt;/div&gt;
 &lt;script type="text/javascript"&gt;
 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)
 }
 }
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

最后想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5开发环境搭建视频，HTML5培训后的前景无限，行业薪资和未来的发展会越来越好的，扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。

H5基础课程：https://ke.qq.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】

注：点击(了解更多)进入课程直播间

html5 html5 app开发 html5培训 canvas var