51Dev开发社区
登录 注册

#canvas

一款由html5 canvas实现五彩小圆圈背景特效
之前介绍了好几款html5canvas实现的特效。今天要为大家介绍一款由html5canvas实现五彩小圆圈背景特效。五彩的小圆圈渐显渐失的特效。效果图如下： 在线预览   源码下载 html代码：<canvas></canvas><div...
代码星球 ·2021-01-21

html5 canvas实现梦幻的3D刺猬球
今天要为大家带来一款html5canvas实现的梦幻的3D刺猬球。页面非常梦幻。效果图如下： 在线预览   源码下载 html代码：<div><canvaswidth="1366"height="62"style="width:1366px;heigh...
代码星球 ·2021-01-21

html5 canvas实现图片玻璃碎片特效
今天要为大家带来一款html5canvas实现的图片玻璃碎片特效。图片以玻璃碎片的形式出现到界面中，然后似玻璃被打碎的效果渐消息。效果图如下： 在线预览   源码下载 实现代码：html代码：<imgsrc="city_copy.jpg"id="src_img"c...
代码星球 ·2021-01-21

HTML5 Canvas 梦幻的文字飞扬动画教程
之前为大家介绍了一款HTML5/CSS33D文字特效文字外翻效果。今天为大家带来的是html5canvas实现的文字漂动动画效果。画面非常梦幻。在线预览   源码下载实现代码如下：html代码：<divclass="dgac"><divclass="dgmainatall...
代码星球 ·2021-01-21

微信图片生成插件，页面截图插件 html2canvas，截图失真 问题的解决方案
html2canvas是一个相当不错的JavaScript类库，它使用了html5和css3的一些新功能特性，实现了在客户端对网页进行截图的功能。html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给页面截图的功能。官网：https://github.com/niklasv...
代码星球 ·2021-01-16

js实现html转pdf+html2canvas.js截图不全的问题
最近做项目中遇到要把整个页面保存为PDF文件，网上找了一下实现的方法都是 html2canvas.js+jsPdf.js来实现。实现的过程是先用html2canvas.js把html页面转成图片，再用jsPdf.js把图片导出为pdf。于是做了个小案例来测试这个功能。<body><!--PD...
代码星球 ·2021-01-15

canvas圆形进度条
通过定义一个canvas标签，new方法传进ID值，和旋转角度值，即可生成圆形进度条<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>圆进度条</title></he...
代码星球 ·2021-01-15

用canvas绘制一个简易时钟
 　　在见识了html5中canvas的强大，笔者准备制作一个简易时钟。　　下面就是成果啦，制作之前我们先分析一下，绘制一个时钟需要做哪些准备。一、1.首先这个时钟分为表盘，指针（时针，分针，秒针）和数字三部分。2.表盘是个圆，这个简单。3.绘制指针时，需要先获取到系统时间，然后找到时间和角度的关系。4.然后...
代码星球 ·2021-01-09

html5canvas 实现签名效果 附上代码 仅供参考
css代码html,body{/*重置默认样式*/margin:0;padding:0;}html,body,#mycanvas{width:100%;height:100%;overflow:hidden;}html代码<divid="mycanvas"><canvasid="canvas">...
代码星球 ·2021-01-09

canvas的基本用法
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>canvas画布</title><style>canvas{border:1pxsolidred;}</...
代码星球 ·2021-01-02

前端小程序——js+canvas 给图片添加水印
市场上各种各样的图片处理器有很多，那么作为程序员的我们是不是应该自己做一个呢？那就从加水印开始吧html：<canvasid="shuiyinTest"></canvas><div><inputid="shuiyinText"value=""type="text"/>&l...
代码星球 ·2020-12-30

html转成pdf,下载（html2canvas 和 jsPDF）
最近碰到个需求，需要把当前页面生成pdf，并下载。弄了几天，自己整理整理，记录下来，我觉得应该会有人需要：）简介我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图，而是通过遍历页面DOM结构，收集所有元素信息及相应样式，渲染出canvasimage...
代码星球 ·2020-12-30

用HTML5canvas绘制一个圆环形的进度表示
先看一下画出来的效果,如下图,这样一个圆环形的进度. 我这里使用HTML5的Canvas来要制作这样一个圆环形的进度, 首先是HTML页面,HTML5的文档标识是:<!DOCTYPE html>   这个文档标识要比HTML4的简单多了. ...
代码星球 ·2020-12-30

canvas元素内容生成图片
转自https://segmentfault.com/a/1190000003853394想要将canvas元素当前显示的内容生成为图像文件，我们首先要获取canvas中的数据,在HTML5 <canvas>元素的标准中提供了toDataURL()的方法可以将canvas中的内容生成为指定格式的D...
代码星球 ·2020-12-29

微信小程序利用canvas生成海报分享图片
一.效果这是借用女神照生成的分享的海报，图片来自网络。 新增了poster组件和更新图片自适应 二.准备准备两张图片连接，最好是自己开发账号验证的https图片链接。三.实现思路其实就是canvas实现方式，首先要就是定义一个canvas容器，把容器放在中间，图片也要动态计算大小居中，显示下面的文字...
代码星球 ·2020-12-27
首页上一页12345...下一页尾页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他