html_canvas（上）

最新推荐文章于 2024-08-22 11:32:42 发布
最新推荐文章于 2024-08-22 11:32:42 发布
阅读量143 收藏
点赞数 1
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42595216/article/details/101228766
版权

参考内容：妙味课堂

canvas   画布

<script>
	window.onload = function(){				
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');
		
//		oGC.fillRect(50,50,100,100);

//		oGC.strokeRect(50.5,50.5,100,100);
//		stroke => 边框    fill => 填充
		oGC.fillStyle = 'red';
		oGC.strokeStyle = 'blue';
		oGC.lineWidth = 10;//线宽
		
//		oGC.lineJoin = 'round';//边框四角变圆弧
		oGC.lineJoin = 'bevel';//边框四角变斜切
						
		oGC.fillRect(50,50,100,100);
		oGC.strokeRect(50.5,50.5,100,100);
		
//		oGC.strokeRect(50.5,50.5,100,100);
//		oGC.fillRect(50,50,100,100);				
	}
</script>
<body>
	<canvas id="c1" width="400" height="400">
		<!--不支持不会显示画布，直接显示span的内容-->
		 <!--默认：宽300 高150-->
		<span>不支持canvas的浏览器</span>
	</canvas>
</body>

 

var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

//起始
oGC.beginPath();

oGC.moveTo( 100,100 );
oGC.lineTo( 200,200 );
oGC.lineTo( 300,200 );
//结束
oGC.closePath();
oGC.stroke();    //框


oGC.beginPath();

oGC.moveTo( 100,200 );
oGC.lineTo( 200,300 );
oGC.lineTo( 300,300 );

oGC.closePath();
oGC.fill();       //填充

 

//清空画布
oGC.clearRect( 0,0,oC.width,oC.height );
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

//.save() => 保存，  restore() => 恢复；两者形成闭包，类似创建局部变量

oGC.save();
oGC.fillStyle = 'red';
oGC.beginPath();

oGC.moveTo( 100,100 );
oGC.lineTo( 200,200 );
oGC.lineTo( 300,200 );

oGC.closePath();
oGC.fill();
oGC.restore();


oGC.beginPath();

oGC.moveTo( 100,200 );
oGC.lineTo( 200,300 );
oGC.lineTo( 300,300 );

oGC.closePath();
oGC.fill();

var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

oGC.lineWidth = 20;
//oGC.lineCap = 'square'; //长度加上宽度的一半
oGC.lineCap = 'round'; 
			
oGC.moveTo(100,100);
oGC.lineTo(200,200);

oGC.stroke();

 

//画布上鼠标画图
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

oC.onmousedown = function(ev){					
	var ev = ev || event;					
	oGC.moveTo( ev.clientX - oC.offsetLeft,ev.clientY - oC.offsetTop );					
	document.onmousemove = function(ev){					
		var ev = ev || event;						
		oGC.lineTo( ev.clientX - oC.offsetLeft,ev.clientY - oC.offsetTop );
		oGC.stroke();			
	}				
	document.onmouseup = function(){						
		document.onmousemove = document.onmouseup = null;
	}					
}		
//定时器实现运动
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');				
var num = 0;

oGC.fillRect(0,0,100,100);				
setInterval(function(){					
	num ++;
    //擦除上一个图形，实现运动			
	oGC.clearRect( 0,0,oC.width,oC.height );				
	oGC.fillRect( num,num,100,100 );					
},30);	
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

//false => 顺时间画圆，默认
oGC.moveTo(200,200);
//oGC.arc( 起始横坐标，起始纵坐标，半径，起始弧度，结束弧度，旋转方向 );				
oGC.arc( 200,200,150,0,90*Math.PI/180,true );
oGC.stroke();

 

//HTML5实现钟表
<script>
	window.onload = function(){
		
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');
		
		toDraw();
		
		function toDraw(){
			
			var x = 200;
			var y = 200;
			var r = 150;
			
			var oDate = new Date();
			var oHours = oDate.getHours();
			var oMin = oDate.getMinutes();
			var oSen = oDate.getSeconds();
			
			var oHoursValue = ( -90 + oHours * 30 + oMin/60 * 30 )* Math.PI/180;
			var oMinValue = ( -90 + oMin * 6 ) * Math.PI/180;
			var oSenValue = ( -90 + oSen * 6 ) * Math.PI/180;
			
			/*oGC.moveTo(x,y);
			oGC.arc( x,y,r,0*Math.PI/180,6*Math.PI/180,false );
			
			oGC.moveTo(x,y);
			oGC.arc( x,y,r,6*Math.PI/180,12*Math.PI/180,false );*/
			//生成秒盘
			oGC.beginPath();
			for( var i = 0; i < 60; i ++ ){	
				oGC.moveTo(x,y);
				oGC.arc( x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false );	
			}
			oGC.closePath();
			oGC.stroke();
			
			//遮盖秒盘
			oGC.fillStyle = 'white';
			oGC.beginPath();
			
			oGC.moveTo( x,y );
			oGC.arc( x,y,r*19/20,0,360*Math.PI/180,false );
			
			oGC.closePath();
			oGC.fill();
			
			//生成分盘
			oGC.lineWidth = 3;
			oGC.beginPath();
			for( var i = 0; i < 12; i ++ ){	
				oGC.moveTo(x,y);
				oGC.arc( x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false );	
			}
			oGC.closePath();
			oGC.stroke();
			
			//遮盖分盘
			oGC.fillStyle = 'white';
			oGC.beginPath();
			
			oGC.moveTo( x,y );
			oGC.arc( x,y,r*18/20,0,360*Math.PI/180,false );
			
			oGC.closePath();
			oGC.fill();
			
			//生成时针
			oGC.lineWidth = 5;
			oGC.beginPath();
			oGC.moveTo( x,y );
			oGC.arc( x,y,r*10/20,oHoursValue,oHoursValue,false );
			oGC.closePath();
			oGC.stroke();
			
			//生成分针
			oGC.lineWidth = 3;
			oGC.beginPath();
			oGC.moveTo( x,y );
			oGC.arc( x,y,r*14/20,oMinValue,oMinValue,false );
			oGC.closePath();
			oGC.stroke();
			
			//生成秒针
			oGC.lineWidth = 1;
			oGC.beginPath();
			oGC.moveTo( x,y );
			oGC.arc( x,y,r*18/20,oSenValue,oSenValue,false );
			oGC.closePath();
			oGC.stroke();
			
			setInterval( toDraw,1000 );			
		}			
	}	
</script>
<body>
	<canvas id="c1" width="400" height="400">
		<!--不支持不会显示画布，直接显示span的内容-->
		 <!--默认：宽300 高150-->
		<span>不支持canvas的浏览器</span>
	</canvas>
</body>

var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

oGC.moveTo(100,200);
//切点处变圆弧
oGC.arcTo( 100,100,200,100,50 );
/*oGC.arcTo( cx, cy, x2, y2, 半径 )
cx,cy表示控制点的坐标，x2,y2表示结束点的坐标，如果我们想画一条弧线，
需要提供3个坐标，开始点，控制点和结束点.开始点一般可以通过moveTo
或者lineTo提供.arcTo提供控制点和结束点.*/
oGC.stroke();


var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

/*	oGC.moveTo(100,200);
	//.quadraticCurveTo( 控制点横坐标，控制点纵坐标，终点横坐标，终点纵坐标 );
	oGC.quadraticCurveTo( 100,100,200,100 );
	
	oGC.stroke();*/

oGC.moveTo(100,200);
//.bezierCurveTo( 控制点1横坐标，控制点1纵坐标，控制点2横坐标，控制点2纵坐标，终点横坐标，终点纵坐标 );
oGC.bezierCurveTo( 100,100,200,200,200,100 );

oGC.stroke();

var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

//.translate => 移动
oGC.translate( 100,100 );
//.rotate => 旋转
oGC.rotate( 45 * Math.PI/180 );				
//.scale( 横坐标缩放倍数，纵坐标缩放倍数 ) => 缩放
oGC.scale( 2,2 );				
oGC.fillRect( 0,0,100,100 );

//旋转，放大，缩小
setInterval(function(){				
	num ++;
	/*由于每一次运行时，.scale()等函数式会在上一次的基础上叠加，即变成了1+2+3+...。
	故需用.save()生成闭包,结束时需用.restore()释放*/
	oGC.save();
	//清画布
	oGC.clearRect(0,0,oC.width,oC.height);
	oGC.translate(200,200);
	
	if( num2 == 100 ){
		value = -1;
	}else if( num2 == 0 ){
		value = 1;
	}	
	num2 += value;	
	oGC.scale( num2*1/50,num2*1/50 );
	oGC.rotate( num * Math.PI/180 );	
	oGC.translate(-50,-50);
	oGC.fillRect( 0,0,100,100 );
	oGC.restore();	
},30);

var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

var yImg = new Image();
//图片预加载
yImg.onload = function(){
	draw(this);
}				
yImg.src = '2.png';				
function draw(obj){					
	oGC.drawImage(obj,0,0);	
	//.drawImage(目标，目标横坐标，目标纵坐标);
}		
//旋转图片
window.onload = function(){	
		var aInput = document.getElementsByTagName('input');
		var oImg = document.getElementById('img1');				
		var yImg = new Image();			
		var iNow = 0;
		
		yImg.onload = function(){
			draw(oImg);
		}				
		yImg.src = oImg.src;				
		function draw(obj){					
			var oC = document.createElement('canvas');
			var oGC = oC.getContext('2d');
			
			oC.width = obj.width;
			oC.height = obj.height;					
			obj.parentNode.replaceChild(oC,obj);
//			oldnode.parentNode.replaceChild(newnode,oldnode);
			oGC.drawImage(obj,0,0);					
			aInput[1].onclick = function(){					
				if( iNow == 3 ){
					iNow = 0;
				}else{
					iNow ++;
				}				
				toChange();				
			}					
			aInput[0].onclick = function(){						
				if( iNow == 0 ){
					iNow = 3;
				}else{
					iNow --;
				}				
				toChange();				
			}					
			function toChange(){						
				switch(iNow){							
					case 1:
						oC.width = obj.height;
						oC.height = obj.width;
						oGC.rotate( 90*Math.PI/180 );
						oGC.drawImage(obj,0,-obj.height);
					break;
					
					case 2:
		
						oC.width = obj.width;
						oC.height = obj.height;
						oGC.rotate(180*Math.PI/180);
						oGC.drawImage(obj,-obj.width,-obj.height);						
					break;
					
					case 3:
					
						oC.width = obj.height;
						oC.height = obj.width;
						oGC.rotate(270*Math.PI/180);
						oGC.drawImage(obj,-obj.width,0);						
					break;
					
					case 0:
					
						oC.width = obj.width;
						oC.height = obj.height;
						oGC.rotate(0);
						oGC.drawImage(obj,0,0);						
					break;						
				}						
			}					
		}
	}
</script>
<body>	
	<input type="button" value="←" />
	<input type="button" value="→" />
	<div>
		<img src="2.png" id="img1" />
	</div>
</body>
<script>
	window.onload = function(){			
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');				
		var yImg = new Image();				
		yImg.onload = function(){
			drag(this);
		}				
		yImg.src = '2.png';				
		function drag(obj){
			//设置背景，类似CSS中的background
			var bg = oGC.createPattern(obj,'repeat');				
			oGC.fillStyle = bg;					
			oGC.fillRect( 0,0,300,300 );					
		}			
	}
</script>
//渐变
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');				
var obj = oGC.createLinearGradient(150,100,250,200);

// 0 => 起始点， 0.5 => 中间， 1 =>结束
obj.addColorStop(0,'red');
obj.addColorStop(0.5,'yellow');
obj.addColorStop(1,'blue');

oGC.fillStyle = obj;			
oGC.fillRect(150,100,100,100);	

//放射渐变
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');
//.createRadialGradient(x1,y1,r1,x2,y2,r2)
var obj = oGC.createRadialGradient(200,200,75,200,200,150);

// 0 => 起始点， 0.5 => 中间， 1 =>结束
obj.addColorStop(0,'red');
obj.addColorStop(0.5,'yellow');
obj.addColorStop(1,'blue');

oGC.fillStyle = obj;
oGC.fillRect(0,0,oC.width,oC.height);

var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

oGC.font = '60px impact';
oGC.textBaseline = 'top';	//顶部对齐
//fill => 填充
oGC.fillText('妙味课堂',0,0);
//stoke => 边框
oGC.strokeText('妙味课堂',0,200);

//文字居中
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

oGC.font = '60px impact';    ///文字大小和文字样式[文字默认不是在左上角居中的]
oGC.textBaseline = 'top';	//顶部对齐
//oGC.textBaseline = 'middle';	
//测量文字宽度，只能测量width，不能测量height;
var w = oGC.measureText('妙味课堂').width;

oGC.fillText('妙味课堂',(oC.width-w)/2,(oC.height-60)/2);

//虚影
var oC = document.getElementById('c1');
var oGC = oC.getContext('2d');

oGC.font = '60px impact';				
oGC.textBaseline = 'top';  //middle bottom				
//阴影偏移距离
oGC.shadowOffsetX = 10;
oGC.shadowOffsetY = 10;
//.shadowBlur => 模糊度
oGC.shadowBlur = 3;				
//alert(oGC.shadowColor);  //默认颜色：黑色透明				
oGC.shadowColor = 'yellow';				
var w = oGC.measureText('妙味课堂').width;				
oGC.fillText('妙味课堂',(oC.width - w)/2,(oC.height - 60)/2);

 

星宇非凡
关注
专栏目录
HTML_canvas
mushroomLNL的博客
04-08 401
canvas可以绘制路径 , 矩形 , 圆形, 字符 , 渐变, 以及 添加图像 首先要创建一个canvas容器 <canvas id="myCanvas" width="300" height="300" ></canvas> 获取容器 , 并创建context对象 var c=document.getElementById("myCanvas"); //创建context对象 var ctx=c.getContext("2d"); 路径(直线) - 方法: moveTo
HTML5 Canvas
qq_35892775的博客
10-13 178
&lt;canvas&gt; 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。 在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。 什么是 canvas? HTML5 &lt;canvas&gt; 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. &lt;canvas&gt; 标签只是图形容器，您必须使用脚本来绘制图形。 你...
使用html2canvas将网页导出为图片
最新发布
stay hungry, stay foolish
08-22 979
Vue 3 的 ref 用来引用 DOM 元素。我们通过 exportContent 引用需要导出的 DOM 元素。：html2canvas 库会将指定的 DOM 元素渲染为画布（canvas），然后可以通过。// backgroundColor: null, // 保留背景透明度。// 使用 html2canvas 渲染指定的 DOM 元素。将画布转换为图片的 Base64 数据 URL。// 将画布转换为图片数据 URL。方法自动触发图片的下载。// 启用跨域资源支持。// 创建一个下载链接。
html-canvas
m0_66711291的博客
04-12 1956
一、canvas基本概念 1 创建canvas标签，在标签内设置宽度和高度。 不支持canvas的浏览器会显示写在canvas内部的内容 <canvas id="canvas" width="600px" height="400px"> 浏览器不支持显示我 </canvas> 注意： canvas和img不同，没有src和alt属性 canvas的高度为150px，宽度为300px 不要在css中设置canvas的宽高，这样会导致绘图变形 如果想要让ca
学习HTML5 Canvas这一篇文章就够了
热门推荐
完善飞跃
06-16 16万+
一、canvas简介&amp;amp;lt;canvas&amp;amp;gt; 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mo
HTML5_canvas_Web.rar_canvas_canvas html5_canvas 绘图_html5_html5 c
09-19
这个压缩包“HTML5_canvas_Web.rar”显然包含了关于如何利用HTML5的canvas元素进行Web绘图的资源，其中的核心文件是“使用 HTML5 canvas 进行 Web 绘图.mht”。 Canvas API 提供了一系列的JavaScript方法，使得开发...
HTML5_Canvas_Cheat_Sheet.zip
07-02
这个“HTML5_Canvas_Cheat_Sheet.zip”压缩包显然包含了关于Canvas API的速查表和可能的示例资源，旨在帮助开发者快速理解和应用Canvas。 Canvas API是HTML5的一个核心特性，它通过JavaScript提供了直接在浏览器上...
图像CANVAS属性.rar_Canvas C#_c++ builder canvas_canvas
09-22
Canvas是HTML5引入的一个功能，允许开发者通过JavaScript动态地在网页上绘制2D图形。而在C#和C++ Builder中，也有类似的概念，提供了对图形绘制的支持。本文将深入探讨Canvas的基本属性以及如何利用这些属性来创建和...
Canvas 绘制逼真 3D 动态圣诞树.zip_HTML_canvas_js
07-14
此外，CSS也可能被用来辅助实现视觉效果，比如设置Canvas的尺寸、背景色，或者为页面其他元素添加样式，与Canvas上的动画形成协调的视觉体验。 总的来说，“Canvas 绘制逼真 3D 动态圣诞树”这个项目展示了...
canvas_flappy_bird_html5_javascript_flappybird_canvas_
09-28
本项目“canvas_flappy_bird_html5_javascript_flappybird_canvas_”就是一个很好的例子，它利用HTML5的Canvas API和JavaScript语言实现了经典的小游戏——Flappy Bird。接下来，我们将深入探讨这个项目中的核心技术...
html2canvas(兼容截图svg元素)
08-22
html2canvas可以截图指定dom元素，但是dom元素中如果含有svg会导致截图不完整，例如使用jsPlumb流程图，其中连线无法截图，所以结合了canvg可以完整截图
html_canvas（下）
星宇非凡
09-24 132
参考内容：妙味课堂 canvas //获取像素 var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.fillRect( 0,0,100,100 ); //.getImageData => 得到一个区域里的所有像素 var oImg = oGC.getImageData(0,0,100,1...
html-canvas-简单入门
ZhanShenvsDiHuang的博客
04-20 203
canvas简单入门
HTML5 Canvas（画布）
shou_ren_bai_bu的博客
08-03 326
简单来说，是HTML5中的标签，它是一个容器，可以使用JS在其中绘制图形或文字。MDN是一个可以使用脚本 (通常为JavaScript) 来绘制图形的HTML元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。主要聚焦于2D图形。
HTML5画布（canvas）
zg0601的博客
10-27 3001
HTML画布（canvas）的简单介绍以及使用方法，从而达到绘制简单图形。
HTML Canvas绘制（实例+参考表）
喜狼狼与灰太杨的博客
08-26 538
HTML canvas 画长方形 html <h5>画板一：画一个长方形</h5> <canvas id="myCanvas" width="200" height="150" style="border:1px solid #c3c3c3;"></canvas> script var cxt=myCanvas.getContext("2d"); cxt.fillStyle="yellow"; var x = 10; var y = 10;
CanvasRenderingContext2D 对象
appteam_vlctech的专栏
09-26 904
CanvasRenderingContext2D 对象 CanvasRenderingContext2D 对象提供了一组用来在画布上绘制的图形函数。可用的函数非常丰富，它们可以分为以下几类： 绘制矩形 可以使用 strokeRect() 和 fillRect() 来绘制矩形的边框和填充矩形。此外，可以使用 clearRect() 来清除矩形所定义的区域。 绘制图像 在 Can
HTML5中的canvas（画布）
zzh1251994430的博客
09-27 1458
HTML5中的canvas画布（） 1、关于canvas的简介 1.canvas是HTML5标签，表示画布，canvas只是作为图像绘制的容器，所有的绘制工作都在脚本JavaScript内部完成。 2.canvas的作用：①绘制基础图形；②绘制文字；③图形变形和图片合成；④处理图片和视频；⑤动画实现；⑥制作小游戏等等。 3.支持canvas的浏览器：Firefox, safari, chrome, opera, IE9等。 2、创建和获取 ① 查看当前浏览器是否支持canvas： 可以在canvas标签内书
HTML5 Canvas 2D API 规范解读
HTML5 Canvas 2D API 是一个用于在Web页面上动态绘制二维图形的JavaScript接口。这个规范为开发者提供了一系列方法和属性，使他们能够在网页上创建复杂的图形、动画甚至游戏。以下是对HTML5 Canvas 2D API关键概念的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值