本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置：
>>> TAG标签：canvas 的结果
  • JavaScript canvas动画实现时钟的代码
    效果图如下： 代码如下： !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge title时钟特效/title/headbody canvas width=150 height=1
    11870
    2020-02-10
    JavaScript

  • 微信小程序canvas开发水果老虎机的思路
    效果图： 使用结构还是canvas？ 使用模板结构(view)生成水果盘的好处一是用户可自定义产出 n x n 的定制化老虎机，二是容易通过算法样式生成布局，三是通过 wx.selectQueryAll 的方法能够很方便的抓到定位数据。但，问题是动画性能过于孱弱，如图构建一个 7x7
    1069
    2020-02-09
    JavaScript

  • JavaScript canvas实现雪花随机动态飘落效果
    效果图如下： 代码如下： !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 titleDocument/title/headstyle body{ margin: 0; padding: 0; } canvas{ background: #000; }/stylebody can
    971
    2020-02-08
    JavaScript

  • 使用canvas实现黑客帝国数字雨效果介绍
    使用canvas实现黑客帝国数字雨 效果图： 代码如下： !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocument/title style bo
    830
    2020-01-05
    html5

  • 详解使用html2canvas实现将html内容写入到canvas中生成图片
    之前我们简单的了解了canvas的基本用法,这里我们来了解下如何将html内容写入到canvas中生成图片，这里我使用到了html2canvas插件，这个插件是基于canvas实现的 html2canvas官网： http://html2canvas.hertzen.com/ 一：下载html2canvas插件 1：直接下载html2
    1048
    2020-01-05
    html5

  • 5分钟实现Canvas鼠标跟随动画背景方法
    关于Canvas制作炫酷背景，我会在git上不定时去更新，并会附上详细的解析，如果有喜欢的话，可以到git上瞧瞧 gitHub传送门 = 前言 相信很多前端小白都看过这样的背景动画，也好奇如何去实现这种效果！将这种效果应用到自己的个人网站上，会让整个网站变得与众
    1950
    2019-11-19
    html5
  • 解决使用html2canvas对有百度地图的Dom元素处理成图片
    问题1：百度地图应用的是瓦片式图片（地图是一张张图片拼出来的），html2canvas 处理时，遇到非同一域名下的图片，浏览器会显示跨域的报错，也无法用反向代理来解决，因为瓦片图片的域名不确定，无法指定 proxy_pass 解决 ：使用百度地图静态图处理（ http:/
    975
    2019-10-14
    HTML/Xhtml
  • html2canvas生成清晰的图片实现打印的教程
    最近由于公司业务要求，需要完成一个一键生成照片图片打印总图的功能， html2canvas是一个非常强大的截图插件，很多生成图片和打印的场景会用到它， 但是效果很模糊 ，本文主要记录一下如果解决模糊的问题以及各种参数如何设置 目录 基本用法 处理模糊问题
    5511
    2019-10-02
    html5

  • 前端canvas水印快速制作教程
    两种水印效果如图： 原理解析： 图一斜纹类：创建一个和页面一样大的画布，根据页面大小以及倾斜角度大致铺满水印文字，最后转化为一张图片设为背景 图二倾斜类：将文字倾斜后转化为图片，然后设置背景图片repeat填充整个页面 代码分析： 这里我只简略分析图
    737
    2019-09-19
    html5

  • 基于Canvas手撸一个六边形能力图的方法
    六边形能力图如下，由 6 个 六边形组成，每一个顶点代表其在某一方面的能力。这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图。当然，你也可以基于其他开源的 js 方案来实现，如 EChars.js 等。 二、六边形绘制基础 六边形能力图有 6 个 六
    1774
    2019-09-02
    html5
  • 导出HTML5 Canvas图片并上传服务器功能
    导出HTML5 Canvas图片，并上传服务器 最近接触的项目中，经常遇到需要canvas绘制图片的需求，比如拼图，比如图片编辑等。canvas处理后的图片必然涉及到保存， 因此，下面方法也许是你需要的~ 思路： 1.使用 toDataURL()方法导出canvas图片，此时得到base64的
    178
    2019-08-17
    html5

  • 使用canvas压缩图片大小的方法
    本篇文章介绍使用canvas压缩图片大小的方法 问题来源 这个问题，源于上传图片文件的时候，后台限制了2MB的大小，but在调起相机拍照的时候分分钟超过了2MB,为了不影响用户体验和功能需求，需要前端对大小进行压缩，然后传到后台。 思路分析 找了很多资料，发
    1473
    2019-08-02
    html5

  • 基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片功能
    本篇文章介绍基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片功能 1.核心功能 此组件功能包含： 图片裁剪（裁剪框拖动，裁剪框改变大小）； 图片马赛克（绘制马赛克，清除马赛克）； 图片预览、图片还原（返回原图、返回处理图）； 图片上传（获
    8022
    2019-07-09
    html5

  • 利用canvas实现环形进度条的方法
    本篇文章介绍利用canvas实现环形进度条的方法。 有时候在项目中会有用到进度条的情况，使用css3也可以实现，但是对于性能不好的设备，或者网络不好的情况下，卡顿现象非常明显，避免出现不流畅的尴尬情况，所以记录一下，使用canvas来实现的方法。 效果图 DO
    202
    2019-06-13
    html5
  • 原生JS使用Canvas实现拖拽式绘图功能
    本篇文章介绍原生JS使用Canvas实现拖拽式绘图功能。 一、实现的功能 1、基于oop思想构建，支持坐标点、线条（由坐标点组成，包含方向）、多边形（由多个坐标点组成）、圆形（包含圆心坐标点和半径）等实体 2、原生JavaScript实现，不依赖任何第三方js库和插
    6614
    2019-06-05
    JavaScript
  • 利用canvas实现图片下载功能来实现浏览器兼容问题
    本篇文章介绍利用canvas实现图片下载功能来实现浏览器兼容问题。 前言:项目中需要实现图片下载功能，第一个想到的是使用a标签的download属性来实现，但是在不同浏览器下测试会发现，有的浏览器无效，点击后直接预览图片。 所以，上网找到了另外一种兼容不同
    1528
    2019-06-02
    html5

  • Canvas 文字碰撞检测并抽稀的方法
    本篇文字介绍Canvas 文字碰撞检测并抽稀的方法。 需求背景 一般在做地图相关的需求是才会用到文字抽稀，我也是在为公司的地图引擎实现一个功能时才实现了该方法，在这里将其简化了，就在普通的 Canvas 上进行操作，并没有引入地图概念 效果 碰撞检测 计算文
    7831
    2019-05-28
    html5

  • 使用canvas画一个微笑的表情的教程
    本篇文章介绍使用canvas画一个微笑的表情的教程。 代码： body div id=canvas-warp canvas id=canvas style=display: block; margin: 200px auto; 你的浏览器居然不支持Canvas! /canvas/divscript window.onload = function () { var canvas = document.getE
    1693
    2019-03-16
    html5

  • 基于js Canvas实现二次贝塞尔曲线的方法
    本篇文章给大家介绍基于js Canvas实现二次贝塞尔曲线的方法 先上效果图： 实现代码： !DOCTYPE htmlhtmlheadmeta charset=utf-8title二次贝塞尔曲线/titlemeta name=Keywords content=meta name=Description content=style type=text/css body, h1{margin:0;
    93
    2018-12-27
    JavaScript

  • JS+HTML5 canvas绘制验证码的教程
    直接上代码： css样式： stylebody{ text-align: center;}canvas{ background:#ddd;}/style HTML部分： body中添加标签canvas： canvas id=c3/canvas js部分： //创建两个变量保存验证码的宽度和高度 var w = 120; var h = 30;//将变量值赋值给canvas c3.wid
    278
    2018-12-07
    JavaScript

  • 实现canvas像素画板的代码
    本篇文章给大家介绍实现canvas像素画板的代码。 绘制像素格子 我们先定义像素格子类 Pixel = function (option) { this.x = option.x; this.y = option.y; this.shape = option.shape; this.size = option.size || 8;} x和y表示中心点坐标，一开始我是这么做
    168
    2018-11-23
    html5

  • 教你解决canvas图片getImageData,toDataURL跨域问题
    今天小编给大家分享解决canvas图片getImageData,toDataURL跨域问题的方法。 一、首先，图片服务器需要配置Access-Control-Allow-Origin 一般团队都会有一个专门域名放置静态资源，例如腾讯是gtimg.com，百度是bdimg.com；或者很多团队使用的是腾讯云或者阿里
    315
    2018-10-22
    html5

  • canvas实现漂亮的下雨效果的教程
    今天小编给大家介绍canvas实现漂亮的下雨效果的教程 先上效果图： 看图来分析下，我们需要实现哪些效果。 1、雨滴下落效果，移动鼠标控制下落方向 2、雨滴下落散成小水珠，小水珠的移动方向和鼠标移动方向相同 3、雨滴下落到鼠标坐标一定范围内，散成小水珠
    1041
    2018-09-16
    html5
  • 使用canvas对多图片拼合并导出图片的方法教程
    本篇文章给大家介绍使用canvas对多图片拼合并导出图片的方法教程 先说下canvas绘图的基本方法,如下： const myCanvas = document.createElement(canvas); myCanvas.width = 400; myCanvas.height = 400;const ctx = myCanvas.getContext(2d);const img = new
    493
    2018-08-29
    html5

  • html 基于canvas 实现的一个截图小demo
    今天小编给大家分享html 基于canvas 实现的一个截图小demo 写在最前 记得以前在人人上看到一个分享，讲解基于js的截图方案，详细的不记得了，只记得还挺有意思的貌似用了canvas？所以这次打算自己写一个分享给大家作者的思路。这只是一个很简陋的小demo如有b
    487
    2018-08-26
    HTML/Xhtml
  • 解决html2canvas关于图片不能正常截取的方法
    今天小编给大家带来解决html2canvas关于图片不能正常截取的方法 问题 首先有这么一个需求。需要前端根据后端传过来数据，动态的生成图片。图片中的文案、背景图片、用户头像全部都是通过后端的接口获
    1271
    2018-08-22
    HTML/Xhtml
  • canvas实现二维码和图片合成的示例教程代码
    本篇文章给大家介绍canvas实现二维码和图片合成的示例教程代码 实现思路是这样的 使用jr-qrcode将url生成data:base64供img使用 然后使用canvas 将两张图合成一张图片 遇到的问题 生成图片之后发现图片很模糊，解决办法是将canvas画布扩大两倍，其他参数也夸
    613
    2018-08-15
    html5

  • html2实现canvas将html代码转为图片的教程
    今天小编给大家带来html2实现canvas将html代码转为图片的教程 转换代码到图片使用 html2canvas，这是一个非常著名的从浏览器网页截图的开源库，使用很方便，功能也很强大。 使用 html2canvas html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然
    779
    2018-08-11
    HTML/Xhtml

  • 实例教程：Canvas制作旋转的太极
    好久没动canvas了，今下午突然想回顾一下，就写了个旋转的太极，哈哈，蛮好玩的，在这里就将自己写的过程展示出来，旋转使用的css实现的，没有用canvas自己的，希望大佬们不要吐槽。html5教程 css body{ background: #ddd;}#canvas{ position: absolute; left
    3726
    2018-04-20
    html5
共3页/63条 首页 上一页 1 2 3 下一页 末页
热门文章
排行榜
  • 每日
  • 周榜
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计