h5 画布canvas标签

最新推荐文章于 2024-02-12 05:00:00 发布

神奇大叔

最新推荐文章于 2024-02-12 05:00:00 发布

阅读量217

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103094109

版权

html 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

画布
	canvas标签,通过控制坐标在canvas上绘制图形
		能够配合js实现非常复杂的动画效果
			<canvas></canvas>	
	
	获得画笔(只能在js中使用)
		对象.getContext("2d");
		在js中，获得该对象后
			var ctx=canvas.getContext("2d");  获得2d画笔
	
	绘画(无颜色)
		矩形需要开始和结束的坐标
			画笔.rect(0,0,30,30);
	
	填充绘画图形
		填充矩形
			画笔.fillRect(0,0,20,02);
			

	绘画只有边框的图形
		绘画矩形边框
			画笔对象.strokeRect(坐标);
				ctx.strokeRect(20,20,40,40);
				

	
	颜色
		更改填充颜色(必须放在画笔填充之前)
			画笔.fillStyle="颜色";
		
			ctx.fillStyle="yellow";
			ctx.fillRect(0,20);

		
		改变边框颜色(在绘画边框之前使用)
			ctx.strokeStyle="颜色";
			
			ctx.strokeStyle="green";
	
	给绘制图像添加阴影
		画笔对象.shadowColor="颜色"
		
	阴影偏移
		X方向偏移：画笔对象.shadowOffsetX="不带px的数字" 
		Y方向偏移：画笔对象.shadowOffsetY="不带px的数字"
	
	设置阴影模糊级别
		画笔对象.shadowBlur=级别数字;
			ctx.shadowBlur=3;
			
	设置线性渐变色
		var 渐变色对象可作为fillStyle和strokStyle的值
		
			活动渐变色对象同时设置线性渐变色的作用坐标
				var colo=ctx.createLinearGradient(0,0,100,0); 设置水平方向的渐变色作用域
				ctx.createLinearGradient(起始x,起始y,结束x,结束y)
				通过坐标的方向和距离开始填充,y坐标不设置,则只会填充水平方向
				 
			添加渐变色颜色
				colo.addColorStop(数字代表作用域,"颜色");
					
					var colo=ctx.createLinearGradient(0,0,0,100);
					colo.addColorStop(0,"orange");
					colo.addColorStop(0.5,"black");
					colo.addColorStop(1,"white");
					
					ctx.fillStyle=colo;
					ctx.fillRect(0,0,20,20);
	
	设置放射性渐变色
		var 渐变色对象=画笔对象.createRadialGradient(圆心坐标)
		
				var fcolo=ctx.createRadialGradient(50,50,10,50,50,50)
		
		添加渐变色颜色
			渐变色对象.addColorStop(数字作用域,"颜色");
			
				fcolo.addColorStop(0,"red");
				fcolo.addColorStop(0.5,"blue");
				fcolo.addColorStop(1,"green");
			
				ctx.fillStyle=fcolo;

代码示例:

<html>
	<head>
		<meta charset="utf-8">
		<title>canvas 容器</title>
	</head>
	<style type="text/css">
			canvas{
				background-color: red;
			}
	</style>
	<script type="text/javascript">
	function t1(){
		var canvas=document.getElementById("showcanvas");
		var ctx=canvas.getContext("2d");
//		ctx.rect(0,0,30,30)
		
		var colo=ctx.createLinearGradient(0,0,0,100);
		var fcolo=ctx.createRadialGradient(50,50,10,50,50,50)
		fcolo.addColorStop(0,"red");
		fcolo.addColorStop(0.5,"blue");
		fcolo.addColorStop(1,"green");
		
		
		
		colo.addColorStop(0,"orange");
		colo.addColorStop(0.5,"black");
		colo.addColorStop(1,"white");
		ctx.shadowColor="blue";
		ctx.shadowBlur=2;
		ctx.shadowOffsetX="3";
		ctx.shadowOffsetY="2";
		
		ctx.fillStyle=fcolo;
		ctx.fillRect(0,0,80,80);
		
		ctx.strokeStyle="green"
		ctx.strokeRect(20,20,40,40)
		
		
	}
	</script>

	<body onload="t1()">
		<canvas id="showcanvas"></canvas>
	</body>
</html>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5 画布canvas标签

画布 canvas标签,通过控制坐标在canvas上绘制图形能够配合js实现非常复杂的动画效果 <canvas></canvas> 获得画笔(只能在js中使用) 对象.getContext("2d"); 在js中，获得该对象后 var ctx=canvas.getContext("2d"); 获得2d画笔绘画(无颜色) 矩形...
复制链接

扫一扫

专栏目录