canvas元素

canvas如何实现多张图片编辑的图片编辑器

下面,我将在我曾经写过的一个canvas涂鸦的基础上,将多张图片编辑器的开发和思考过程记录下来。那是因为canva具有许多html元素不具备的特点,例如可以在canvas上画图,画线条等等操作,而且canvas直接提供api可以将画布上展示的内容导成图片。到目前为止,无论是base64直接转成blob,还是canvas直接转成blob,最后目的都是为了将blob数据上传到服务器。 »

记一次高分屏下canvas模糊问题

做的是canvas的项目,在自己电脑上运行的时候,发现,会出现点击选不中的问题还有,canvas刷新会有残影问题。canvas宽高与css宽高那么如何解决canvas高分屏问题呢?既然高分屏下canvas的像素点会变多,导致画布缩放,那么我们能不能通过某种方法把canvas缩放回去呢? »

js Canvas实现圆形时钟教程

阅读本文需要一点关于canvas基本用法的基础,本文实例为大家分享了HTML5 Canvas实现圆形时钟简易教程第一步:新建一个最简单的html文件,并且在标签中定义元素canvas。在canvas的坐标系中,是以x轴正方向所在的方向为0弧度。Canvas clock tutorial canvas 在完成了第二步之后,我们可以看到一个当前时间的圆形时钟轮廓。 »

Three.js快速入门教程

引言本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解。而Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。于是,Three.js对WebGL提供的接口进行了非常好的封装,简化了很多细节,大大降低了学习成本。Three.js入门教程 这是对国外一份教程的翻译,一共六篇文章。Three中使用采用常见的右手坐标系定位。 »

javascript结合Flexbox简单实现滑动拼图游戏

滑动拼图就是把一张图片分成几等份,打乱顺序(下图),然后通过滑动拼凑成一张完整的图片。 要实现一个拼图游戏,需要考虑怎样随机的打乱顺序,怎样交换两张图片的位置,等等。但是,使用了Flexbox布局以后,这都不需要你去考虑,浏览器会帮你做,Flexbox就是这么的强大。关于Flexbox的介绍可以点击这里。 这个游戏中要用的是Flexbox布局的order属性,order属性可以用来控制Flex项目... »

利用HTML5的画布Canvas实现刮刮卡效果

今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果。我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果。以上内容是我写的利用HTML5的画布Canvas实现... »

html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片

如何使用JS截取HTML页面为图片呢,下面为大家介绍一款JS截图插件html2canvas.js html2canvas.js 能够实现在用户浏览器端直接对整个或部分页面进行截屏。 html2canvas.js可以将当页面渲染成一个Canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。 它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当 浏览器不支持Canvas时,将采用... »

vue移动端使用canvas签名的实现

vue移动端使用canvas签名的实现

效果 canvas画板移动端 .gif 需求   在一些项目业务中,经常会使用到画板,让用户自己去写/画一些东西做标示,比如说在线签电子合约、签名等,如果不用插件,那么如何使用h5的canvas画布来实现这一需求呢? 【本篇只讨论移动端,PC端请看上篇】 分析   很明显,我们需要一个canvas,关于canvas的一些基本操作可以在w3school... »

JavaScript+HTML5 canvas实现放大镜效果完整示例

JavaScript+HTML5 canvas实现放大镜效果完整示例

本文实例讲述了JavaScript+HTML5 canvas实现放大镜效果。分享给大家供大家参考,具体如下: 效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas放大镜</title> <... »

Angular实现svg和png图片下载实现

我经常思考,在面临一个不确定问题时,以往的经验究竟有无辅助作用?如果把经验遗忘会产生何种程度的影响?在上下求索未果之后,如何找回曾经的感觉,恰若灵光一现?凡此种种,终是要思考总结的,这篇文章便是我的反思之作。 本篇文章会记述一些实用的svg与png之间的转换技巧并强调一种思考原则。 概述 技巧 svg和png图片转换和下载 解决chrome data url too large下载问题 解决@Vi... »

利用three.js画一个3D立体的正方体示例代码

利用three.js画一个3D立体的正方体示例代码

简介 three.js 是一款WebGL框架,WebGL可以让我们在canvas上实现3D效果。实现3D效果在国内来说还算是比较新的东西,可供查阅的资料也不多。这篇文章仅是一个入门篇,介绍如何绘制一个3D正方体。 Three.js中的基本概念 Three.js包含3个基本概念:场景(Scene)、相机(Camera)和渲染器(Renderer)。 场景就是需要绘制的对象,相机代表取景的视角,渲染器... »

JavaScript基础——使用Canvas绘图

JavaScript基础——使用Canvas绘图

最近在学习Canvas画图的方法,最近有时间做了个整理,如下: 1、基本用法 要使用<canvas>元素,必须先设置其width和height属性,指定可以绘图的区域大小,出现在开始后结束标签中的内容是后备信息,如果浏览器不支持<canvas>元素,就会显示这些信息。例如: <canvas id="drawing" width="200" height="200"&g... »

Android自定义View实现角度选择器

Android自定义View实现角度选择器

首先来看一下Google Photos的效果 实现最终的效果: 实现思路 仔细观察这个效果,先分析构成结构,我把它分成三部分:     1、表示刻度的点     2、相应点上方的数字     3、控件中央的当前刻度与三角 可以看出,构成元素十分简单,不涉及图片,Drawable,那么只需要用Canvas画出来... »

Android实战打飞机游戏之实现主角以及主角相关元素(3)

Android实战打飞机游戏之实现主角以及主角相关元素(3)

先看效果图新建player 类public class Player { private int playerHp = 3; private Bitmap bmpPlayerHP; // 主角坐标以及位图 private int x, y; private Bitmap bmpPlayer; // 主角移动速度 private int speed = 5; »

Android中View的炸裂特效实现方法详解

本文实例讲述了Android中View的炸裂特效实现方法。创建 ExplosionFieldExplosionField 继承自 View,在 onDraw 方法中绘制动画特效,并且它提供了一个 attach2Window 方法,可以把 ExplosionField 最为一个子 View 添加到 Activity 上的 root view 中。 »

Android视图控件架构分析之View、ViewGroup

Android视图控件架构分析之View、ViewGroup

在Android中,视图控件大致被分为两类,即ViewGroup和View,ViewGroup控件作为父控件,包含并管理着子View,通过ViewGroup和View便形成了控件树,各个ViewGoup对象和View对象就是控件树中的节点。六、ViewGroup的绘制通常情况下,ViewGoup不需要绘制,但是ViewGroup会使用dispatchDraw()来绘制其子View。七.自定义Vie... »

Canvas 像素处理之改变透明度的实现代码

一 定义和用法getImageData()方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。对于ImageData对象中的每个像素,都存在着四方面的信息,即RGBA值: R - 红色 G - 绿色 B - 蓝色A - alpha 通道color/alpha 信息以数组形式存在,并存储于 ImageData 对象的 data 属性中。二 代码 改变透明度... »

整理HTML5的一些新特性与Canvas的常用属性

除了线性渐变以外,HTML5 Canvas API 还支持放射性渐变,所谓放射性渐变就是颜色会介于两个指定圆间的锥形区域平滑变化。 »

微信小程序canvas拖拽、截图组件功能

先看下微信小程序canvas拖拽功能 组件地址 github.com/jasondu/wx-… readme近期补上 实现效果 如何实现 使用canvas 使用movable-view标签 由于movable-view无法实现旋转,所以选择使用canvas 需要解决的问题 如何将多个元素渲染到canvas上 如何知道手指在元素上、如果多个元素重叠如何知道哪个元素在最上层 如何实现拖拽元素 如何缩放... »

一步步教你利用Canvas对图片进行处理

前言 Canvas,中文译为“画布”,HTML5中新增了<canvas>元素,可以结合JavaScript动态地在画布中绘制图形。 今天,我们不讲Canvas的图形绘制,而是讲如何对图片进行处理,话不多说了,来一起看看详细的介绍吧。 大概流程非常简单,主要分为以下三个步骤: Canvas图片处理 是的,就像把大象装进冰箱一样简单,哈哈。 一、主要API 整个流程中所用到的主要Canva... »

JS库之Three.js 简易入门教程(详解之一)

开场白 webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架,由于其易用性被广泛应用。如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索。所以我写这个教程的目的一是自己总结,二是与大家分享。 本篇是系列教程的第一篇:... »

使用JS和canvas实现gif动图的停止和播放代码

HTML5 canvas可以读取图片信息,绘制当前图片。于是可以实现图片马赛克,模糊,色值过滤等很多图片特效。我们这里不用那么复杂,只要读取我们的图片,重绘下就可以。 HTML代码: <img id="testImg" src="xxx.gif" width="224" height="126"> <p><input type="button" id="testBtn... »

JavaScript截屏功能的实现代码

JavaScript截屏功能的实现代码

最近参与了网易炉石盒子的相关页面开发,在做卡组分享页(地址:炉石盒子卡组分享),有个需求:用户可以把这个卡组以图片的形式分享给好友。最初的的做法是使用服务器把该页面转换成图片,然后把图片地址返回给前端。嗯,这样也挺好的啊,而且服务器还可以对转换出来的图片进行缓存,下次请求可以直接返回图片地址了。原理上是毫无毛病的。然而,问题来了,后台转换的图片和页面内容偶尔不一致,有时候会少了一一些内容,PM姐姐... »

移动端刮刮乐的实现方式(js+HTML5)

程序员有一种惯性思维,就是看见一些会动的东西(带点科技含量的,猫啊,狗啊就算了),总要先想一遍,这玩意用代码是怎么控制的。比如电梯,路边的霓虹灯,遥控器,小孩子的玩具等,都统统被程序员“意淫”过。 有时候还会感觉程序员看世界会看的透彻一点…………. 想必大家都玩过刮刮乐,下面就介绍一种刮刮乐的移动端实现方式!用到canvas 1、用HTML 5 ca... »

canvas压缩图片转换成base64格式输出文件流

昨天研究了一下canvas压缩图片的方法,上传上来给大家分享一下 <!--调用canvas方法--> <canvas id="canvas"></canvas> <!--压缩后的图片路劲--> <img src="" class="preview"> <img src="" class="preview"> <!--原图... »

Page 1 of 41234