用HTML5的canvas做一个时钟

对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了.今天我们就用canvas来做一个小小的时钟.完整的代码在这里https://github.com/wwervin72/jQuery. 那么首先在这个页面里面我使用了两个canvas,一个用来绘制静态的时钟表盘和刻度,另一个用来绘制时钟的三个指针,然后用定位让他们重合到一起.然后这里没什么好说的,下…

深夜，用canvas画一个时钟

深夜,用canvas画一个时钟查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚刚开始拉开帷幕,精彩的还在后头,内推不过,还有机会去秋招,这次秋招不过,还有明年的春招.但是明年的春招我可能等不起了,我迫不及待地需要一份工作,需要一份我向往的工作. 今天看书看到canvas部分,便用它来写了一个时钟,原理很简单,用context.arc(100, 100, 99, 0, Math…

html5入门：教你用canvas写一个时钟

今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数,先看看一下我们的案例效果图吧! 哦哦,我的时间暴露了!效果很粗糙,没有美化,有兴趣的朋友可以写的好看一点! 好了, 这是用什么写的呢,这大家都知道,肯定是html5 的canvas标签和js共同完成的啦,利用canvas的绘图的属性画一个一个的形状,现在就跟我一起画吧! 分析:时钟包括表盘,小时…

【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言好吧,说是“粒子引擎”还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看[demo],扫描后点击屏幕有惊喜哦… 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观这个简单的引擎里需要有三种元素:世界(World).发射器(Launcher).粒子(Grain).总得来说就是:发射器存在于世界之中,…

一起用HTML5 canvas做一个简单又骚气的粒子引擎

前言好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观这个简单的引擎里需要有三种元素:世界(World).发射器(Launcher).粒子(Grain).总得来说就是:发射器存在于世界之中,发射器制造粒子,世界和发射器都会影响粒子的状态,每个粒子在经过世界和发射器的影响之后,计算出下一刻的位置,把自己画出来. 世界(World) 所谓"世界",就是全…

用canvas绘制一个时钟

实现一个时钟的绘制和时间的显示一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>时钟</title> <style type="text/css"> *{ margin:…

通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助

最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去.接下来我将和你们分享如何制作这个时钟. 在body中添加canvas标签: <canvas id="myCanvas" width="600px" height="600px" style="border:1px solid #c3c…

canvas做的时钟，学习下

canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上下文对象. getContext("2d") 对象属性和方法,可用于在画布上绘制文本.线条.矩形.圆形等等. fillRect(l,t,w,h):默认颜色是黑色 strokeRect(l,t,w,h):带边框的方块.默认一像素黑色边框 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. beginP…

用HTML5 Canvas做一个画图板

使用HTML5可以非常简单地在canvas上实现画图应用,用支持html5的浏览器便可在下面的区域进行绘画,要看到演示效果,请确保你的浏览器支持HTML5: 功能很简单,原理其实和拖放是类似的,主要是三个事件: 在canvas 上绑定mousedown 事件以标志绘画的开始(调用moveTo 移动画笔) 在document 上绑定mousemove 事件来处理绘画时的行为(调用lineTo 以及stroke 进行绘画) 在document 上绑定mouseup 事件以标志绘画的结束(解绑docu…

玩转html5（四）----使用canvas画一个时钟（可以动的哦！）

先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <html> <body> <canvas width="500" height="500" id="clock" > 您的浏览器不支持canvas </canvas> <script> //获取画布…

使用canvas绘制一个时钟

周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么一定记得先用beginPath(),beginPath()可以新建一个子路径,接下来的绘制,都是针对该子路径进行的.如果不适用该方法,那么默认和之前路径为同一路径设置,在接下来的绘制中,前面设置的路径会被重复绘制(打个比方,如果不用beginPath(),上面我绘制了一个长方形,边框宽度为1,下面我…

使用HTML5的canvas做图片剪裁

前言图片裁剪上传,不仅是一个很贴合用户体验的功能,还能够统一特定图片尺寸,优化网站排版,一箭双雕. 需求就是那么简单,在浏览器里裁剪图片并上传到服务器. 我第一个想到的方法就是,将图片和裁剪参数(x,y,scale,rotate)一并上传给服务器,服务器来做图片处理,so easy.但是,这并不符合潮流发展的方向:能在前端做的处理,就放前端做吧.与潮流妥协的结果就是,前端越来越复杂. 一开始我并不认为浏览器能够读取并生成图片.想想看啊,要做"点击复制"的这样简单的功能,都需要借助 F…

HTML5 在canvas绘制一个矩形

笔者:本笃庆军原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增.y坐标向下递增. 使用画图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制一个实心的矩形. strokeRect(x,y,width,height) : 绘制一个空心的矩形. clearRect(x,y,width,height) :…

html5、canvas绘制本地时钟

效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas clock</title> </head> <body> <canvas id="clock" width="500" height="500&q…

初识canvas，使用canvas做一个百分比加载进度的动画

canvas作为H5中重要的新增特性,使开发者可以用它来创作各种令人惊叹的作品.先来看一下浏览器对canvas的支持情况. <canvas> 标签定义图形,比如图表和其他图像,我们使用脚本来绘制图形. 先看一下这次动画的结果: gif图可能不完整,可以点击这里查看完整效果. canvas的API较多,这里我们只介绍一下本次使用到的一下API,更多的canvas可以查看这里. beginPath() //重置或者开始当前路径 strokeStyle //设置笔触的颜色,即画出来的颜色 arc(…

canvas的进阶 - 学习利用canvas做一个炫酷的倒计时功能

先给大家贴一张图片,因为我不会上传视频(￣□￣||) ,请大家谅解了~ 如果有知道怎么上传视频的大神还请指点指点 ^_^ ~ 然后看一下代码: html部分 : <!DOCTYPE html> <html lang="en" style="height: 100%"> <head> <meta charset="UTF-8"> <meta name="viewport"…

利用html5的localStorage做一个备忘录

实现一个便签功能,可以记录内容和写的时间,当网页从新载入,可以读取以前的记录. html文档 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>simple note</title> <script type="text/javascript"src="comment.j…

canvas画一个时钟

效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canvas" width="500" height="500"&g…

利用canvas做一个简单个gif停止和播放

var ImagePlayer = function(options) { this.control = options.control; this.image = options.image; this.STOP_TEXT = '停止'; this.PLAY_TEXT = '开始'; this.drawFirstFrame = function() {}; this.stop = function() { if (!this.baseUrl) { this.baseUrl = this.ima…

用canvas画一个时钟

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id=" style="border:1px solid #000000;">您的浏览器不支持canvas &l…

使用Canvas和JavaScript做一个画板

本文同步于个人博客:https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天学习了HTML5的<canvas>元素,今天就来实践一下,用canvas做一个画板. 首先说一下要实现的功能: 切换画笔颜色调整笔刷粗细清空画布橡皮擦擦除撤销操作保存成图片兼容移动端(支持触摸) 好了,废话少说,先看最终效果:https://zhoushuozh.github.io/drawingborad 准备工作首先,准备个容器,也就是画板了. &l…

H5 canvas圆形的时钟

今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.不过不是所有的浏览器都支持这个标签的,支持的有谷歌4.0,ie9.0,火狐2.0等. 2.时钟的绘制第一步在html中…

使用canvas制作一个移动端画板

概述使用canvas做一个画板,代码里涵盖了一些canvas绘图的基本思想,各种工具的类也可以分别提出来用详细代码下载:http://www.demodashi.com/demo/10503.html 一.准备工作 1.如果不需要任何修改的话,直接使用dist文件夹内的文件即可 2.如果需要修改,需要安装node 3.打包js运行webpack 打包css运行gulp css 使用dist/index.html预览 4.学习es6与canvas基础知识,api 二.程序实现文件结构: r…

【canvas系列】用canvas实现一个colorpicker

每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ********************************************************************** 效果图和demo 突然翻到了之前用js和dom写的一个colorpicker,比较挫,扔张图就好(old) 这个真的很挫,性能很差,因为每一个可选的颜色值都是一个…

【canvas系列】用canvas实现一个colorpicker（类似PS的颜色选择器）

用canvas实现一个colorpicker

http://www.cnblogs.com/ufex/p/6382982.html 每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ********************************************************************** 效果图和demo 突然翻到了之前用js和dom写的一个colorpicker…