canvas 绘制八卦图
绘制要点:
1.getContext('2d'); -->绘图环境,2维空间
2.fillRect(x,y,w,h); -->矩形:实心(黑色背景)
3.strokeRect(x,y,w,h); -->矩形:空心(白色背景)
4.clearRect(x,y,w,h); -->矩形:在已存在的矩形中挖空一个矩形
5.ctx.fillStyle='红色'; -->给图添加颜色
代码如下:
<canvas id="cavas" width="" height="" style="border: 1px solid;"></canvas>
<!--高宽不能写在style里-->
var cas=document.querySelector('#cavas'); var ctx=cas.getContext('2d');
var n;
function rgb(){
var r=Math.floor(Math.random()*);
var g=Math.floor(Math.random()*);
var b=Math.floor(Math.random()*);
return 'rgb('+r+','+g+','+b+')';
}
setInterval(function(){ //定时器
for (var i=;i<;i++) {
for (var j=;j<;j+=) { //循环行
i%==?n=j:n=j+; //如果是偶数行,n=j,如果是奇数行,n=j+1
ctx.fillStyle=rgb(); //添加颜色
ctx.fillRect(*n,*i,,);
}
}
},);
//也可以用下面的方法
setInterval(function(){ //定时器
for (var i=0;i<8;i++) {
for (var j=0;j<8;j++) { //循环行
if (i%2==0&&j%2==0) { //偶数行
ctx.fillRect(100*i,100*j,100,100);
} else if(i%2!=0){ //奇数行
ctx.fillRect(100*i,100*(2*j+1),100,100);
}
ctx.fillStyle=rgb();
}
}
},200);
效果(代码有个定时器会不停的闪动):
canvas 绘制八卦图的更多相关文章
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
- Android自己定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...
- Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- Android自定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- 使用canvas绘制扇形图
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- canvas绘制折线图(仿echarts)
遇到的问题:Retina屏上字体线条模糊问题 解决方案:放大canvas的大小,然后用css压缩回原大小,例如:想要900*400的画布,先将画布设置为 width="1800px" ...
- canvas 绘制星座图(好玩)--转载
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- canvas绘制折线图
效果图: 重难点: 1.画布左上角的顶点的坐标为(0 ,0),右下角的坐标最大,与平常思维相反 2.数据的处理 html代码: <!DOCTYPE html><html lang=& ...
随机推荐
- hdu6223 Infinite Fraction Path 2017沈阳区域赛G题 bfs加剪枝(好题)
题目传送门 题目大意:给出n座城市,每个城市都有一个0到9的val,城市的编号是从0到n-1,从i位置出发,只能走到(i*i+1)%n这个位置,从任意起点开始,每走一步都会得到一个数字,走n-1步,会 ...
- 2016"百度之星" - 资格赛(Astar Round1) B
Problem Description 度熊面前有一个全是由1构成的字符串,被称为全1序列.你可以合并任意相邻的两个1,从而形成一个新的序列.对于给定的一个全1序列,请计算根据以上方法,可以构成多少种 ...
- newCachedThreadPool无上限线程池使用
1. newCachedThreadPool无上限线程池, 动态根据代码添加线程, 如果线程空闲60秒没有被使用,会自动关闭 package ThreadTest; import java.u ...
- python+splinter实现12306网站刷票并自动购票流程
python+splinter实现12306网站刷票并自动购票流程 通过python+splinter,实现在12306网站刷票并自动购票流程(无法自动识别验证码). 此类程序只是提高了12306网站 ...
- logback+spring实践
配置文件名称使用: logback-spring.xml 配置user.home是jvm传过来的系统参数,可以直接使用 <property name="LOG_PATH&quo ...
- js模仿微信语音播放的小功能
自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,, 代码如下: <!DOCTYPE html> <html lang="en&qu ...
- Hibernate通过自编写sql查询
public List<InterProductMsg> selectIsHaveProductid(String productId) { String sql="SELECT ...
- kafka与zookeeper读写分析
kafka的读写都通过leader完成,而zookeeper只有写要通过leader而读可以通过任意follower,我觉得造成这种差异的原因还是在于使用场景. kafka的设计目标是实现一个高吞吐的 ...
- .NET标准化题目
1. 下面对FxCop的描述中,错误的是:(D) A. FxCop是一个静态代码分析工具. B. 可以定制自己的规则加入FxCop引擎. C. FxCop主要是对.NET中托管代码的assembly进 ...
- Quartz使用(6) - Quartz项目实战
本片博文将阐述项目工作中使用Quartz的情况,包含项目背景.项目框架.Quartz集群部署等方面,重点讲述如何在实际项目中使用Quartz. 1. 背景 因项目需求,需要定时调用数据下载接口,并将数 ...