叶雨梧桐BLOG

Html实例---三个画布练习

发布时间:2013年11月8日 / 分类:前端笔记 / 吐槽

1.代码:

<!--打印出方形图块,颜色渐变-->
<canvas id="square" width="200" height="200" border="1"></canvas>
<script type="text/javascript">
window.onload =drawSquare(); 
function drawSquare(){   
                var canvas = document.getElementById("square");   
                var context = canvas.getContext("2d");   
                for(var i=0;i<6;i++){
					for(var j=0;j<6;j++){
							context.fillStyle='rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';
							context.fillRect(j*25,i*25,25,25);
						}
					}
                  
		 }  

</script>
<!--打印出圆形图块,颜色渐变-->
<canvas id="circular" width="200" height="200"></canvas>
<script type="text/javascript">
window.onload =drawCircular();
function drawCircular(){
				var canvas= document.getElementById("circular");
				var context=canvas.getContext("2d");
				for(var i=0;i<6;i++){
					for(var j=0;j<6;j++){
						context.strokeStyle='rgb(0,'+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+')';
						context.beginPath();
						context.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
						context.stroke();
					}
				}
		}
</script>
<!--打印出半透明圆,有渐变效果-->
<canvas id="transcir" width="200" height="200"></canvas>
<script type="text/javascript">
window.onload=drawTranscir();
function drawTranscir(){
		var canvas=document.getElementById("transcir");
		var context=canvas.getContext("2d");
		context.fillStyle='#FD0';
		context.fillRect(0,0,75,75);
		context.fillStyle='#6C0';
		context.fillRect(75,0,75,75);
		context.fillStyle='#09F';
		context.fillRect(0,75,75,75);
		context.fillStyle='#F30';
		context.fillRect(75,75,75,75);
		context.fillStyle='#FFF';
		context.globalAlpha=0.3;
		for(var i=0;i<7;i++){
			context.beginPath();
			context.arc(75,75,10+10*i,0,Math.PI*2,true);
			context.fill();
		}
	}
</script>

2.效果(以上代码实现)

标签:php

版权声明:除特殊注明外,均由叶雨梧桐原创,转载请保留文章出处;
本文链接:http://gt520.com/qdbj/96.html

已有 5 条评论
  1. HTML5一般的浏览器都不支持的

    1. @微历史:哦 不知道哎,才接触学习的,嘿嘿,

  2. 博主,你用的代码高亮插件是哪个,感觉我的插件貌似有些问题啊,麻烦你看看,谢了、、、、、

    1. @alinwei:现在更换成Luan的代码高亮插件了,效果挺不错的,你看看

    2. @alinwei:额,Godson和Tod的都用了。什么问题啊?是不是 后边的几个语言高亮使用后会在日志页面弹出错误对话框啊?我主要使用的PHP、html和Java三个模式的,有个问题是 回车br 不以代码样式出现,而是直接执行换行了。

订阅叶雨梧桐BLOG RSS
分类
最新文章
最近回复
  • 夏目贵志: 三年了后偶遇这博客了!
  • 钟水洲博客: 拜个早年
  • 鸟叔の窝: 最近一直在关注贵博客,加个友情链接可否?
  • 荆棘鸟: 请教博主 评论自动发邮件怎么弄 我的域名邮箱老是配置不成功咋回事?
  • thornbird: 为何这样麻烦 直接安装LNMP即可
  • 态度xiaomi: 支持下
  • 梦青年: 我的网站下线了,你可以把我的友链去掉了,感谢多年的支持和关注~ 梦青年。
  • 便宜VPS: 已添加贵站链接,我站:https://www.vultrclub.com,站:便宜VPS
  • vultr: 朋友 交换链接吗
  • 罗小黑: py小白看不懂啊! Traceback (most recent call last): ...
归档