摘要:
一、绘制五角星 1.1页面结构 1.2封装一个绘制多边形的函数 在绘制之前首先我们需要画图分析一下,如何绘制一个多边形 由上图我们可以知道,五角星其实是由10个点连接起来的,而五角星外角的五个点是在一个大圆上,内角的五个点也是在一个小圆上,并且这两个圆的圆心是一样的。因此我们只要知道这两个圆的半径以 阅读全文
摘要:
说明: 在上述的例子中,我们使用UTC时间代替本地时间创建了一个日期对象,再通过getTime()方法获取到时间戳 由于北京时区是东八区,领先UTC时间8个小时,所以在上述例子中,我们需要将北京时间减去8以获得UTC时间(UTC + 时区差 = 本地时间 ) 阅读全文
摘要:
1、canvas转换方法 1.1canvas转换方法 二、canvas实现图形的中心点旋转 step1:获取canva元素并指定canvas的绘图环境 step2:在画布(100,100)的位置绘制一个100*100的矩形 step3:要实现图片的中心旋转,首先我们需要将画布的(0,0)位置移到绘制 阅读全文
摘要:
在本篇文章中,我们将利用canvas的知识来绘制一个时钟动画。 1、布局篇 1.1基础布局 首先我们在页面中放置一个canvas画布,将画布的颜色设置成#eee,宽高为400px。 1.2、获取canvas绘图环境 1.3、绘制时钟表盘 首先我们利用arc方法在画布上绘制一个半径为100的圆,圆心的 阅读全文
摘要:
canvas绘制贝塞尔曲线 阅读全文
摘要:
canvas路径是指存以贝塞尔曲线为理论基础的区域绘制方式,绘制时产生的线条称为路径。路径由一个或多个直线段或者曲线组成,或者是经过精确计算画出的特殊图形,路径是canvas实现绘图的基础 阅读全文
摘要:
canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“画布”,我们可以利用js脚本在“画布”上绘制图形。 阅读全文