10分钟,利用canvas画一个小的loading界面
首先利用定义下canvas得样式
<canvas width="1024" height="720" id="canvas" style="border: 1px solid #808080;display: block;margin: 100px auto;>你的游览器不支持canvas</canvas>
这里主要要说的就是宽高,不要在style里面定义,不然会被拉伸。(对于这点,建议大家看下W3c文档,不是很懂)
高度和宽度属性确定画布的宽度和高度的坐标系统,而CSS属性只确定大小的盒子,它会显示。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
获取对象,然后获取上下文进行画图。
好的,接下来来个小例子(画弧)
- //设置线宽,颜色(我喜欢通俗的称他为空心画法)
- ctx.lineWidth = 2;
- ctx.strokeStyle = '#176785';
//arc是花弧形,如果用fill的画法的话,会把他封闭起来。
ctx.beginPath();
ctx.arc(512, 360, 100, 0.5 * Math.PI, 1 * Math.PI);
ctx.stroke();
ctx.closePath();
对于ctx.beginPath();和 ctx.closePath();我觉得是canvas灵魂,一些好的canvas的引擎之所以效率高,他们有很大程度的关系。
1.比如,有些人画的感觉画出来的canvas是带有锯齿状,就是在画布上,绘制了同样一件事情N次之后的效果。
看下面一个例子
ctx.beginPath();
ctx.arc(512, 360, 100, 0.5 * Math.PI, 1 * Math.PI);
ctx.closePath();
ctx.stroke();
这就是ctx.closePath();的作用,闭合那些线,但是fill的画法默认是带有ctx.closePath();这个功能的,而ctx.beginPath();的作用就是相当于函数中的分割了,分割作用域。
2.例子就举上面的,如果将上面两段代码何必,去掉ctx.beginPath();,那么那段弧形会被绘制两次,而第二个则绘制一次。言下之意就是,假如没有ctx.beginPath();的话,代码中要绘制100个图片,第一个就会绘制100次,第一个99次,总而言之是100+99+98+。。。。。
3.接下来两个小例子。
//定义一个渐变的颜色,其实坐标,x,y,w,h var color = ctx.createLinearGradient(512, 460, 512, 260);
// 开始颜色,和结束的颜色 color.addColorStop(0, '#499989');
color.addColorStop(1, '#176785'); ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(512, 360, 99, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath(); //绘制文本
var a = 12;
ctx.font="50px Arial";
ctx.fillStyle = "#fff";
//居中
ctx.textAlign = "center";
ctx.beginPath(); //文字内容, 起始坐标,宽度
ctx.fillText(a, 510, 375 , 64);
ctx.closePath();
4.接下来我们把上面内容结合起来。
//定时器
var timeClear;
//定义一些数字
var arcNum = 0.02,
textNum = 1; function load1(){ if(textNum >= 101){
return 0;
} ctx.lineWidth = 2;
ctx.strokeStyle = '#176785'; ctx.beginPath();
ctx.arc(512, 360, 100, (0.5 + arcNum - 0.02) * Math.PI, (0.5 + arcNum) * Math.PI);
ctx.stroke();
ctx.closePath(); //绘制里面的渐变颜色
var color = ctx.createLinearGradient(512, 460, 512, 260);
color.addColorStop(0, '#499989');
color.addColorStop(1, '#176785'); ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(512, 360, 99, (0.5 - arcNum/2)* Math.PI, (0.5 + arcNum/2) * Math.PI);
ctx.fill();
ctx.closePath(); //绘制文本
ctx.font="80px Arial";
ctx.fillStyle = "#fff";
ctx.textAlign = "center";
ctx.beginPath();
ctx.fillText(textNum, 510, 385 , 124);
ctx.closePath();
//ctx.clearRect(0,0,1024,720); arcNum = arcNum + 0.02;
textNum = textNum + 1; } timeClear = setInterval(load1, 60);
看起来不太舒服,建议自己在电脑上测试:
在线调试唯一地址:http://www.gbtags.com/gb/debug/7400a9ba-51a7-409b-b1f4-b01363b9c625.htm
一个简单的loading写完了,但是里面有很多问题,比如那个fill和text都是有部分重复的绘制,绘制了99次的,其实我主要 想用fill那个圆来取代每次画好的文本还要clear。如果你把文字换种颜色可能明白我的意思了。然后这会导致底部绘制100次,导致底部出现锯齿的样 子。
而且,绘制圆放在前面,就是相当于clearRect的作用,去清除文字。
面对这个问题,不知道大家如何解决的。
阅读原文:10分钟,利用canvas画一个小的loading界面
10分钟,利用canvas画一个小的loading界面的更多相关文章
- 利用canvas画一个实时时钟
先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- 1.利用canvas画一个太极图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Android利用canvas画各种图形
Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...
- 用Canvas画一个刮刮乐
Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- 用canvas画一个的小画板(PC端移动端都能用)
前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...
- Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形) .
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
- Android利用canvas画各种图形 及Paint用法 .
引自:http://blog.csdn.net/carlfan/article/details/8139984 1.首先说一下canvas类: Class Overview The Canvas cl ...
- TTS-零基础入门-10分钟教你做一个语音功能
在本片博客正式開始之前,大家先跟我做一个简单的好玩的 小语音. 新建一个文本文档,然后再文档里输入这样 一句话 CreateObject("SAPI.SpVoice").Spea ...
随机推荐
- 简单了解Linux的inode与block
Linux常见文件系统类型:ext3(CentOS5),ext4(CentOS6),xfs(CentOS7) Windows常见文件系统类型:FAT32,NTFS (1).inode的内容 1)ino ...
- Linux下Makefile学习笔记
makefile 可以用于编译和执行多个C/C++源文件和头文件. (1) #include "file.h" 和 #include <file.h> 的区别 #inc ...
- struts2和1的区别
先大致介绍下struts1和struts2 struts:过去最流行的web MVC组件,apache项目组的一个开源项目. struts2:现在非常流行的web MVC组件,是apache用stru ...
- poj2299(树状数组+离散化)
这道题题意很简单,就是求逆序数.用暴力的方法是显然会超时的.这里考虑采用树状数组. 采用树状数组话遇到的问题就是需要999,999,999个空间来存放数据,这显然是不可行的.考虑到输入数据最多只有50 ...
- FastReport.Net使用:[32]对话框使用2
方法/步骤 1.先浏览下数据,成绩表中有部分科目成绩没有,如果是这种情况,报表是不能打印的. 2.添加一个对话框,将其Visible属性设置为False,默认情况下改对话框是不显示的. 将确定按钮的D ...
- HDU 1698 Just a Hook (线段树)
Problem Description In the game of DotA, Pudge’s meat hook is actually the most horrible thing for m ...
- [BZOJ4196][NOI2015]软件包管理器(树链剖分)
4196: [Noi2015]软件包管理器 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 2166 Solved: 1253[Submit][Sta ...
- 精通android体系架构、mvc、常见的设计模式、控制反转(ioc)
1.请看某个著名的it公司一则招聘信息的其中一条要求:“熟悉android系统架构及相关技术,1年以上实际android平台开发经验:”,里面非常明确的说道要求熟练android系统架构,这从某种程度 ...
- Codeforces Beta Round #6 (Div. 2 Only) B. President's Office 水题
B. President's Office 题目连接: http://codeforces.com/contest/6/problem/B Description President of Berla ...
- VK Cup 2016 - Qualification Round 2 B. Making Genome in Berland 水题
B. Making Genome in Berland 题目连接: http://www.codeforces.com/contest/638/problem/B Description Berlan ...