图片合成以及canvas的应用

2018-06-19 H5案例分享 H5案例分享

使用 canvas 在前端实现图片合成

 

基本API

// 绘制图片常用 API
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

ctx.drawImage(imgage: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement | ImageBitmap, distX: number, distY: number)

// 绘制文本常用API
const ctx = document.getElementById('canvas').getContext('2d')
ctx.font = "48px serif"
ctx.fillText("Hello world", 10, 50)

各个参数的用途已在代码中标出。image是将要渲染的图片,distX 和 distY 分别代表着图片与原点 x 轴和 y 轴方向上的距离。

 

先来一个最简单的例子。

 


  
  
  Canvas DrawImage
    canvas {
      border: 1px black dashed;
    }
  

效果如下图:

 

绘制步骤

 

使用 Canvas 实现图片合成通常需要以下三个步骤:

  1. 根据设计稿量出页面中个元素的位置
  2. 计算文本相对于图片中元素的距离,设置字体大小和自身样式
  3. 调用 API 绘制图片

 

针对第一点,以实际项目为例,先对要合成页的页面元素进行拆分,随后拉取参考线,对各个元素的位置进行测量并记录对应位置

 

针对第二点,先设置要渲染文字的字号,以及样式。

ctx.font = "48px serif"
ctx.fillStyle = "#dfe0e7"
ctx.fillText("Hello world", 10, 50)

其中的10,和50分别代表距离 x 轴和 y 轴的距离。

 

第三点,调用 API 绘制图片。


以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

网易严选:定制你最严选的家

人民日报&&网易有道词典:以你之名,守护汉字

10个案例了解H5之图片合成

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

方式一:

通过H5案例提交小助手(微信小程序)
微信扫描下方二维码进入,进行投稿

方式二:

在电脑端,进入H5案例发布界面,自己编写

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~