`

Canvas教程:拼图,组合图像,画圆形图像,添加二维码logo,添加文字

    博客分类:
  • js
阅读更多

1,创建canvas对象

 

// method 1
document.createElement('canvas')

// method 2
<canvas id="canvas" />
document.getElementById('canvas')

 

 

2,设置大小并初始化上下文

 

canvas.width = 341;
canvas.height = 512;
var ctx = canvas.getContext('2d');

 

3,在canvas上面添加文字,若有图像,最后添加文字,避免被覆盖

 

ctx.font = 'bold 20px Arial';
ctx.fillStyle = '#058';
ctx.fillText('我爱你', 150, 180);
ctx.strokeStyle = 'rgba(255,255,255,0.4)';
ctx.strokeText('我爱你', 150, 180);

 

4,添加背景图像

 

var img = new Image();
img.src = 'bg.jpg';
img.onload = function() {
  var width = img.width / 2;
  var height = img.height / 2;

  // 背景图像加载后画到canvas画布上
  ctx.drawImage(img, 0, 0, width, height);
}

 

5,添加二维码图像即组图

 

// https://github.com/davidshimjs/qrcodejs
<div id="qrcode" style="display: none"></div>
new QRCode($('qrcode'), {
  text: 'http://qiaolevip.iteye.com',
  width: 128,
  height: 128,
  colorDark : '#000000',
  colorLight : '#ffffff',
  correctLevel : QRCode.CorrectLevel.H
});
var img = $('qrcode').querySelector('img');

// 二维码图像画到canvas画布上
ctx.drawImage(img, 0, 0, width, height);

 

6,logo叠加添加到二维码上面即组图

 

var img = new Image();
img.src = 'logo.jpg';
img.onload = function() {
  var width = img.width / 2;
  var height = img.height / 2;

  // 背景图像加载后画到canvas画布上
  ctx.drawImage(img, 0, 0, width, height);
}

 

7,绘制圆形logo图像

 

ctx.save(); // 保存当前ctx的状态
ctx.arc(x+a/2, y+a/2, a/2, 0, 2 * Math.PI); //画出圆
ctx.clip();
ctx.drawImage(img, x, y, a, b); // 在刚刚裁剪的园上画图
ctx.restore(); // 还原状态

 

 

 

 

8,最终效果图呈现形式:

 

 

更多实例应用扫码体验:

 

  • 大小: 87.2 KB
分享到:
评论

相关推荐

    微信小程序 绘制二维码 添加中间头像Logo

    在微信小程序中添加中间带有头像Logo的二维码是一项常见的需求,尤其在个性化和品牌推广方面。这个主题涉及到几个关键知识点,包括微信小程序的开发环境、SVG图像处理、Canvas API的运用以及图片资源的加载和合成。 ...

    FastReport添加二维码功能

    在FastReport中添加二维码功能是一项实用且重要的扩展,它允许用户在报表中嵌入包含信息的二维码,便于数据的快速扫描和读取。本文将深入探讨如何在FastReport中实现二维码的添加,并涉及相关的技术细节。 首先,要...

    android 生成二维码 中间可以添加logo

    总之,生成带有Logo的二维码是通过先创建基础的二维码图像,然后将Logo图像插入到合适的位置来实现的。通过调整Logo的位置、大小和透明度,可以实现不同的视觉效果。而取消Logo的添加则直接返回纯二维码的Bitmap。在...

    canvas生成二维码生成

    // 创建base64的二维码图像数据 ``` 3. **在canvas上绘制**:将生成的二维码数据绘制到canvas上。首先创建canvas元素,然后获取其上下文,使用drawImage方法绘制二维码: ```html &lt;canvas id="qrcode"&gt;&lt;/canvas...

    SVG和Canvas绘图:SVG滤镜和Canvas图像处理.docx

    SVG和Canvas绘图:SVG滤镜和Canvas图像处理.docx

    canvas拼图小游戏

    综上所述,创建一个canvas拼图小游戏涉及多个步骤,从图像处理到用户交互,再到游戏逻辑的实现。熟练掌握Canvas API和JavaScript是成功构建此类游戏的关键。在提供的`puzzle.html`文件中,你可以找到具体的游戏实现...

    微信小程序生成logo二维码

    在Canvas上先绘制二维码,然后在指定位置绘制logo图片,可以通过调整坐标和缩放比例来实现logo与二维码的完美融合。 4. **保存图片**: - **wx.canvasToTempFilePath**:完成绘制后,使用`wx.canvasToTempFilePath...

    QML--Canvas画布实现矩形圆形等圈定

    此外,QML的Canvas还支持路径、曲线、渐变色、图像处理等功能,可以用来创建复杂的图形和动画。通过学习和熟练掌握这些API,开发者可以打造出极具创意的QML应用程序。 在`draw-canvas`这个文件夹中,可能包含了示例...

    jquery实现生成二维码带logo的那种

    logo图片会被添加到二维码的中央,并根据二维码的大小自动缩放以适应。 需要注意的是,logo图片需要是同一域名下的,或者你已经配置了CORS允许跨域。此外,由于浏览器的安全策略,如果在本地环境下运行这段代码,...

    HTML5 Canvas核心技术—图形、动画与游戏开发一书源代码

    - **绘图上下文**:Canvas API主要通过`&lt;canvas&gt;`元素和它的`2d`绘图上下文来操作,这个上下文提供了一系列方法用于画线、填充形状、绘制图像等。 - **坐标系统**:Canvas的坐标系统以左上角为原点,X轴向右,Y轴...

    二维码制作带logo前端后台两种方式

    1. 先生成二维码并绘制到canvas: ```javascript var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var qrCode = new QRCode(canvas, { text: '你的数据', width: 200, ...

    canvas拼图游戏,基于html + canvas画布实现

    canvas拼图游戏,基于html + canvas画布实现

    android 带Logo二维码生成源码

    这个“android带Logo二维码生成源码”项目提供了一种解决方案,允许用户从手机图库选择图片作为Logo,并自定义输入信息,生成个性化二维码,最后将其保存到手机图库中。 首先,我们要理解二维码的生成原理。二维码...

    canvas二维码生成

    - 绘制到Canvas:通过Canvas的`drawImage()`方法,将生成的二维码数据转换为图片并绘制到Canvas上。 2. 实时生成二维码: - 监听事件:可以监听用户输入事件,当输入内容变化时,重新生成二维码。例如,可以监听...

    JavaScript基于qrcode.js带Logo彩色二维码(彩色艺术二维码)

    在本文中,我们将探讨如何利用qrcode.js库创建带有Logo和彩色的艺术二维码。 首先,qrcode.js是由Davidshimjs开发的一个轻量级的JavaScript库,它允许开发者在浏览器环境中生成二维码。这个库简单易用,只需几行...

    HTML5 Canvas粒子组合文字特效.zip

    在这个特效中,"粒子"指的是无数个微小的图形元素,它们按照特定的规则运动,组合成文字或图像。粒子系统在游戏和视觉设计中非常常见,用于模拟火焰、烟雾、星光等效果。在Canvas上实现粒子特效,通常涉及以下几个...

    基于html2canvas生成带二维码的活动海报

    3. 将二维码图片与其他元素(如文字、图片等)一起添加到HTML的DOM中。 4. 调用html2canvas,传入包含海报元素的容器,使其将整个容器渲染为canvas。 5. 将canvas转换为图片(通常为PNG格式),并提供下载链接或使用...

    logo可以更换的二维码

    通过在canvas上绘制二维码图像,然后在其指定位置绘制logo,最后合并成一张新的图片。以下是一个简单的canvas示例: ```javascript var canvas = document.createElement('canvas'); var ctx = canvas.getContext('...

    微信小程序生成二维码带logo

    通常的做法是先生成纯色的二维码图片,然后利用图像处理库(如JavaScript的sharp或canvas库)在二维码中心插入logo图片。这个过程涉及到图片的裁剪、缩放和合并操作,需要精确计算logo的大小和位置,以保持二维码的...

    Android 中生成普通二维码、中心Logo 二维码、以及扫描解析二维码

    然后创建一个方法,传入要编码的数据和生成二维码的尺寸,调用`MultiFormatWriter`和`BitMatrix`来生成二维码图像: ```java private Bitmap generateQRCode(String data, int width, int height) { try { ...

Global site tag (gtag.js) - Google Analytics