canvas绘制时钟及注释及save和restore的用法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <canvas id="canvas" width="500" height="500"></can…

使用canvas绘制时钟什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,所以我们必须使用脚本来绘制图形.通过它可以绘制路径,盒.圆.字符以及添加图像等等. 这篇博文,我将通过html5中的canvas元素绘制一个走动的时钟. html代码如下: <canvas id="clock" width="200" height=&qu…

[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动画必要的基础之一. 再谈clip函数,这个函数在这篇文章[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)已经有讲到过他的基本用法,我们来两个简单的例子复习一下: <meta charset='utf-8' /> <s…

Canvas绘制时钟

①首先在HTML的body标签中添加一个canvas标签,用于绘制时钟. <canvas id="myCanvas" width="600" height="300"></canvas> ②在JavaScript中通过getElementById函数得到Canvas对象,并创建画笔. var c=document.getElementById("myCanvas"); var cxt= c.getCon…

HTML5 之Canvas 绘制时钟 Demo

<!DOCTYPE html> <html> <head> <title>Canvas 之时钟 Demo</title>  <style type="text/css"> * { margin: 0; padding: 0; font-family: YaHei Consolas Hybrid,宋体; font-size: 14px; list-style: none; }…

小任务之Canvas绘制时钟

背景图的绘制(大圆.数字.小圆点) 掌握基础知识:圆的绘制(arc方法),关于圆的弧度的计算,数学中关于sin cos的用法圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/12 那么rad=i*2*Math.PI/12 x=Math.cos(rad)*所需要的长度(也就是半径-差值) y=Math.sin(rad)*所需要的长度(也就是半径-差值) 同理可得60个点的绘制 60个数字分得弧度每个rad=i*2*Math.PI/60 x=Math.cos(rad)*所需…

用canvas绘制时钟

用canvas做时钟其实很简单,下面是我做出的效果: 是不是还挺漂亮的? 下面上代码: html <div class="whole"> <canvas id="canvas" width="450" height="450"></canvas> <canvas id="canvas1" width="300" height="300&…

html5 Canvas绘制时钟以及绘制运动的圆

1.绘制时钟  <script type="text/javascript"> window.onload=function(){ var oC1=document.getElementById('c1') var oGC=oC1.getContext('2d'); function toDraw(){ var x=200; var y=200; var r=150; oGC.clearRect(0,0,oC1.width,oC1.he…

canvas 中save和restore的用法

在创建新的控件或修改现有的控件时,我们都会涉及到重写控件或View的onDraw方法. onDraw方法会传入一个Canvas对象,它是你用来绘制控件视觉界面的画布. 在onDraw方法里,我们经常会看到调用save和restore方法,它们到底是干什么用的呢? ❑ save:用来保存Canvas的状态.save之后,可以调用Canvas的平移.放缩.旋转.错切.裁剪等操作. ❑ restore:用来恢复Canvas之前保存的状态.防止save后对Canvas执行的操作对后续的绘制有影响. sa…

HTML5 Canvas 绘制时钟

网上会看到很多绘制的时钟,看代码也是云里雾里,自学了下Canvas,觉得不难,就自己做了一个. 先看一下截图: 比较简陋,但是该有的都有了,样式只加了个阴影. html代码就不贴了,就一个canvas. <canvas id="clock" width="300" height="300"></canvas> 下面是JS实现: 1.取得上下文: var clock = document.getElementById('cl…

使用canvas绘制时钟（http://heeroluo.net/Article/Detail/95）

准备工作在HTML中指定一个区域放置时钟: <div id="clock" style="position: relative;"></div> 时钟的一些外观设定: var width = 260; // 桌布宽度var height= 260; // 桌布高度var dot = {x : width / 2,y : height / 2,radius : 6}; // 圆点位置.半径var radius = 120; // 圆半径var…

用canvas绘制一个简易时钟

在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数字三部分. 2.表盘是个圆,这个简单. 3.绘制指针时,需要先获取到系统时间,然后找到时间和角度的关系. 4.然后利用画圆函数,把起始和终点设为同一角度,即可画出以圆心为起点的射线(指针)了. 二. 接下来,我们再分析一下,绘制时钟需要用到的函数. 1.arc(x, y, r, start, st…

android_浅析canvas的save()和restore()方法

<span style="font-size:18px;"> </span> <span style="font-size:18px;"></span> 绘图之前,首先需要调整画笔,待画笔调整好之后,再将图像绘制到画布上,这样才可以显示在手机屏幕上!Android 中的画笔是 Paint类,Paint 中包含了很多方法对其属性进行设置,主要常用方法: setAntiAlias: 设置画笔的锯齿效果. setCol…

canvas风景时钟

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"…

用canvas绘制一个时钟

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

canvas绘制表盘时钟

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas绘制表盘</title></head><body> <canvas id='box' width="500" height="500" > 您的浏览器不支持canvas &l…

使用Canvas制作时钟动画

复习Javascript到Canvas的知识点,看到一个使用Canvas绘制的静态时钟例子,便想将其变成动态显示系统时间的时钟动画.另外再配上数字显示的时钟,一个小的时钟模块的诞生了!目前的界面还比较粗糙,只有简单的界面和动画效果. 演示观看地址:http://htmlpreview.github.io/?https://github.com/omocc/Demo/blob/master/%E6%97%B6%E9%92%9Fdemo/clock.html 这个时钟包括两个部分,动画圆盘时钟和数字…

使用Canvas绘制简单的时钟控件

Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互.有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制. 基本使用在html源码中只要像普通标签那样使用即可,比如下面的示例,但是在一些老旧的浏览器在中是不支持canvas的,因此我们常在canvas标签中提示用户,具体代码如下所示. <canvas…

[JS,Canvas]日历时钟

[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="requestNextAnimationFrame.js"></script> <script src="calendarWithTi…

HTML5中canvas的save和restore方法

canvas的save和restore方法: save() 方法把当前绘画状态的一份拷贝压入到一个保存图像状态的栈中.这里的绘画状态指坐标原点.变形时的变化矩阵(该矩阵是调用 rotate().scale() 和 translate() 的结果).以及图形上下文对象的当前属性值等内容. 1.图像上下文CanvasRenderingContext2D的属性和方法: 属性描述canvas 取…

canvas画时钟，重拾乐趣!

canvas时钟--效果图一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <canvas id="canvas" class="canvas" width="400" height="400" border:></canvas> 2.使用id寻找canvas元素,在js代码中使用docume…

测试canvas绘制旋转文字的性能

canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一样的,每次绘制前都会去动态的改变画布上下文context的旋转角度值,导致CPU占用太多. 而且发现如果绘制的不是文字元素,而是其他路径类如:rect arc等路径时,cpu并不会飙升. text旋转后绘制性能低于canvas其他路径类,下面给大家看下测试的结果: 有如下代码:分别绘制100个文字,…

canvas 绘制动态圆环进度条

由于使用的是vue开发,所以就展示一下绘制函数好了,上图是效果图 drawMain(drawing_elem, percent, forecolor, bgcolor) { /* @drawing_elem: 绘制对象 @percent:绘制圆环百分比, 范围[0, 100] @forecolor: 绘制圆环的前景色,颜色代码 @bgcolor: 绘制圆环的背景色,颜色代码 */ var context = drawing_elem.getContext("2d"); var cent…

Canvas学习：封装Canvas绘制基本图形API

Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法,我们可以很轻松的绘制出一些基本图形,比如直线.弧线.矩形.圆形.三角形等.但有很多基本图形的绘制是没有现成的方法,需要通过CanvasRenderingContext2D对象中的属性和方法组合在一起才能绘制出来,比如说点划线.箭头和正多边形等.为了更好的帮助大家在Canvas中绘制这些基本图形,…

HTML5学习总结——canvas绘制象棋(canvas绘图)

一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas绘图_象棋棋盘</title> </head> <body> <canvas id="canvas1" width="805…

canvas的save与restore方法的作用

网上搜罗了一堆资料,最后总结一下. save:用来保存Canvas的状态.save之后,可以调用Canvas的平移.放缩.旋转.错切.裁剪等操作. restore:用来恢复Canvas之前保存的状态.防止save后对Canvas执行的操作对后续的绘制有影响. 对canvas中特定元素的旋转平移等操作实际上是对整个画布进行了操作,所以如果不对canvas进行save以及restore,那么每一次绘图都会在上一次的基础上进行操作,最后导致错位.比如说你相对于起始点每次30度递增旋转,30,60,90…

Html5绘制时钟

最近在对Html5比较感兴趣,就用空闲时间做一些小例子进行练习,今天绘制一个走动的时钟,具体如下图所示: 具体思路在上图已有说明,代码如下: <script type="text/javascript"> //绘制圆形的弧度,ctx 为绘制环境,x,y为绘制中心,r为绘制半径,st为起始弧度,end为结束弧度 function circle(ctx, x, y, r, st, end, w) { ctx.lineWidth = w; ctx.beginPath(); ctx…

canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

引言在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需要用到一对canvas方法,在变换坐标系前保存canvas状态,在变换并绘制完成之后,恢复canvas状态,即save()和restore(). [备注] 这篇文章只是记录分享下解决问题的过程,找我要demo的,或者问我什么东西怎么做的,就不要加我了.你可以加一个canvas相关的交流群,或者如果需…

canvas中save()和restore()方法

save()和restore()方法是绘制复杂图形不可缺少的方法它们是分别用来保存和恢复canvas状态的,都没有参数 save():用来保存Canvas的状态.save之后,可以调用Canvas的平移.放缩.旋转.错切.裁剪等操作. restore():用来恢复Canvas之前保存的状态.防止save后对Canvas执行的操作对后续的绘制有影响. save和restore要配对使用(restore可以比save少,但不能多),如果restore调用次数比save多,会引发Error. 参考文档…

使用html5 canvas绘制圆形或弧线

注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链接以了解使用html5 canvas绘制图形的完整内容. 在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: arc(x, y, radius, startRad, endRad, anticlockwise) 在canvas画…

【canvas绘制时钟及注释及save和restore的用法】的更多相关文章