canvas
关注
分享
扫一扫
开心大表哥
高级前端开发进阶版
展开
-
canvas在手机高清屏下绘图不清晰的解决办法
原来的图片： 合成的图片： 原因分析 假设dpr = 2；图片大小为60x60px。 对dpr有一定的了解基础 1.DOM呈现图片过程 图片->浏览器css像素（显示尺寸）->屏幕实际像素 60x60 -> 30x30 -> 60x60 图片像素:实际像素 1： 1 2.canvas绘制过程 图...原创 2018-02-09 13:20:37 · 8021 阅读 · 0 评论 -
移动端canvas合成图片，填充文字自动换行
今天用canvas合成带有微信公众号二维码和祝福语的春节贺卡 由于代码都是原生的没有引入其他库，所以直接将对应部分贴出来吧。html<!--画布 --><canvas id="canvas" class="hide"> Your browser does not support the HTML5 canvas tag.</canvas>...原创 2018-02-12 10:06:18 · 2369 阅读 · 2 评论 -
Canvas的事件处理，监听点击的位置
DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个元素，可以直接用jquery增加click事件$(‘#p1’).click(function(){…})”。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用...原创 2018-02-12 17:06:44 · 34314 阅读 · 0 评论 -
canvas如何简单粗暴地载入视频
canvas加载视频和图片是一样的，使用drawImage，区别就是给一个定时器不停的抓取每帧的画面，放入Canvas画布里面，这个办法十分的简单粗暴。（粗粗粗粗~~~） 而且可以达到神同步，当视频暂停，canvas里面的视频就暂停，当视频再次开始播放，canvas里面的视频也再次播放。 html:<!DOCTYPE html><html><hea...原创 2018-02-12 17:55:49 · 17086 阅读 · 0 评论 -
微信小程序canva生成图片，长按图片识别小程序二维码详解
下面这个图片就是通过图片和文字等内容合成的一张带有微信小程序二维码的图片，在小程序内部长按可以识别出来： 基本思路是先将内容用canvas排好版，然后把该canvas转化成图片；图片利用wx.previewImage进行展示，才能识别图片中的微信小程序二维码，这是博主目前知道唯一一种识别二维码的手段。1.合成canvas wxml:<canvas canvas-id="myc...原创 2018-05-09 14:45:54 · 25924 阅读 · 7 评论