html5 canvas 画布基础

蔚落 2022-08-19 13:08 331阅读 0赞

# canvas 画布基础 #

学习整理的笔记，内容丰富

有绘制矩形，绘制线条，绘制二次贝塞尔曲线，绘制弧线等。知识点在代码注释中

效果图：

![Center][]

代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>canvas 教程</title>
    		<style>
    			canvas{background: #F9F9F9;border:1px solid #000;}
    			.one,.two,.thr,.four{float:left;margin-left: 200px;}
    			
    		</style>
    		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script>
    		<script>
    			$(function(){
    				// 创建2d的画图环境
    				var canvas_2d = document.getElementById("canvas-test").getContext("2d");
    				// fillRect()  绘制“被填充”的矩形 /  前两个数是坐标，后两个是像素大小
    				canvas_2d.fillRect(0,0,100,100);
    				// strokeRect() 绘制矩形（无填充）
    				canvas_2d.strokeRect(100,0,100,100);
    				// fillStyle  设置或返回用于填充绘画的颜色、渐变或模式
    				canvas_2d.fillStyle = "rgba(0,0,0,0.8)";
    				// strokeStyle  设置或返回用于笔触的颜色、渐变或模式
    				canvas_2d.strokeStyle = "cadetblue";
    				// shadowColor  设置或返回用于阴影的颜色
    				canvas_2d.shadowColor = "rgba(3,3,3,0.6)"
    				// shadowBlur  设置或返回用于阴影的模糊级别
    				canvas_2d.shadowBlur = 10;
    				// shadowOffsetX  设置或返回阴影距形状的水平距离
    				canvas_2d.shadowOffsetX = 4;
    				// shadowOffsetY  设置或返回阴影距形状的垂直距离
    				canvas_2d.shadowOffsetY = 4;
    				canvas_2d.fillRect(200,0,100,100);
    				canvas_2d.strokeRect(300,0,100,100);
    				
    				// createLinearGradient()  创建线性渐变。前两个是渐变起点坐标，后两个便是结束坐标
    				var linearGradient = canvas_2d.createLinearGradient(100,100,100,200);
    				// addColorStop()  规定渐变对象中的颜色和停止位置
    				linearGradient.addColorStop(0,"#000");
    				linearGradient.addColorStop(1,"#eee");
    				canvas_2d.fillStyle = linearGradient;
    				canvas_2d.fillRect(100,100,100,100);
    				// createRadialGradient()  创建放射状/环形的渐变。每三个为一组，前两个是坐标后一个是半径
    				var radialGradient = canvas_2d.createRadialGradient(350,150,40,350,150,80);
    				radialGradient.addColorStop(0,"#eee");
    				radialGradient.addColorStop(1,"#000");
    				canvas_2d.fillStyle = radialGradient;
    				canvas_2d.fillRect(300,100,100,100);
    				// createPattern()  在指定的方向上重复指定的元素这个我就不试了
    				
    				/*---------------------one-----------分割线------------two-----------------------*/
    				
    				var $canvas_line = document.getElementById("canvas-line");
    				var canvas_2d_line = $canvas_line.getContext("2d");
    				$canvas_line.οnmοusedοwn=function  (e) {
    				   var startx=e.layerX;
    				   var starty=e.layerY;
    				   // moveTo(x,y) 开始绘制一条直线，指定线条的起点
    				   canvas_2d_line.moveTo(startx,starty);
    				   $canvas_line.οnmοusemοve=function  (e) {
    					     var endx=e.layerX;
    					     var endy=e.layerY;
    					     // lineTo(x1,y1) 指定直线要到达的位置
    						 canvas_2d_line.lineTo(endx,endy);
    						 // stroke() 绘制路径
    						 canvas_2d_line.stroke();
    				   }
    				   $canvas_line.οnmοuseup=function  () {
    					    $canvas_line.οnmοusemοve=null;
    						$canvas_line.οnmοuseup=null;
    					   }
    		            }
    				/*
    				lineCap  设置或返回线条的结束端点样式
    					butt:向线条的每个末端添加平直的边缘 缺省
    					round:向线条的每个末端添加圆形线帽。
    					square:向线条的每个末端添加正方形线帽，效果不明显
    				lineJoin  设置或返回两条线相交时，所创建的拐角类型
    					miter:创建尖角; 缺省
    					bevel:创建斜角。
    					round:创建圆角。
    				lineWidth  设置或返回当前的线条宽度
    					number:当前线条的宽度，以像素计
    				miterLimit  设置或返回最大斜接长度
    					number:正数。规定最大斜接长度.5
    				斜接长度指的是在两条线交汇处内角和外角之间的距离
    				只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效
    				*/
    				canvas_2d_line.lineWidth=10;
    				canvas_2d_line.lineCap="round";
    				canvas_2d_line.moveTo(10,10);
    				canvas_2d_line.lineTo(150,10);
    				canvas_2d_line.stroke();
    				
    			/*------------------two--------------分割线---------------thr--------------------*/
    			
    			// beginPath()：开始一条路径，或重置当前的路径。
    			// closePath()：创建从当前点到开始点的路径，关闭当前的绘图路径
    			   var canvas_radial=document.getElementById("canvas-radial");
    			   var canvas_2d_radial=canvas_radial.getContext("2d");
    			   // 绘制二次贝塞尔曲线 三部曲 quadraticCurveTo 前两个是贝塞尔左边，后两个是结束坐标
    			   //canvas_2d_radial.moveTo(50,100);
    			   //canvas_2d_radial.quadraticCurveTo(200,200,300,100);
    			   //canvas_2d_radial.stroke();
    	           canvas_radial.οnmοusedοwn=function  (e) {
    			   		var startx=e.layerX;
    					var starty=e.layerY;
    				 
    				 canvas_radial.οnmοuseup=function  (e) {
    				 	var endx=e.layerX;
    				 	var endy=e.layerY;
    				 canvas_radial.οnmοusemοve=function  (e) {
    				  	canvas_2d_radial.clearRect(0,0,400,400);
    				  	var conx=e.layerX;
    				  	var cony=e.layerY;
    				  	canvas_2d_radial.beginPath();
    				  	canvas_2d_radial.moveTo(startx,starty);
    				  	canvas_2d_radial.quadraticCurveTo(conx,cony,endx,endy);
    				  	canvas_2d_radial.stroke();
    				 	}
    				 }
    	           }
    	           // arc(x坐标,y坐标,r半径,开始角度,结束角度,false逆时针/true顺时针);创建弧/曲线（用于创建圆或部分圆)
    	           var canvas_2d_arc=canvas_radial.getContext("2d");
    	           canvas_2d_arc.arc(100,100,30,0,Math.PI/2,false);
    	           canvas_2d_arc.stroke();
    	           
    	           /*------------------thr--------------分割线---------------four--------------------*/
    	          
    	          	var canvas=document.getElementById("canvas-is-path");
    			   	var canvas_2d_is_path=canvas.getContext("2d");
    	           	canvas_2d_is_path.arc(200,200,50,0,2*Math.PI);
    			   	canvas_2d_is_path.stroke();
    			   	var angle=0;
    			   	canvas.οnclick=function  (e) {
    			    	var mx=e.layerX;
    					var my=e.layerY;
    					// isPointInPath(x,y) 返回 true，说明指定的点位于当前路径中,反之不在
    					if(canvas_2d_is_path.isPointInPath(mx,my)){
    				  		setInterval(function  () {
    				  			// 清除画布 和 beginPath();连用
    				   			canvas_2d_is_path.clearRect(0,0,400,400);
    				    		angle+=0.2;
    							canvas_2d_is_path.beginPath();
    				    		canvas_2d_is_path.arc(200,200,50+10*Math.sin(angle),0,2*Math.PI);
    							canvas_2d_is_path.stroke();
    				  		},50);
    					}
    			   }
    			});
    		</script>
    	</head>
    	<body>
    		<section class="one">
    			<hgroup>
    				<h2>canvas 教程</h2>
    				<h3>画矩形</h3>
    			</hgroup>
    			<canvas width="400" height="400" id="canvas-test">
    				您需要更新浏览器呢 凸^-^凸
    			</canvas>
    		</section>
    		<section class="two">
    			<hgroup>
    				<h2>canvas 教程</h2>
    				<h3>点击开始画线 / 路径(线条)修饰</h3>
    			</hgroup>
    			<canvas width="400" height="400" id="canvas-line">
    				您需要更新浏览器呢 凸^-^凸
    			</canvas>
    		</section>
    		<section class="thr">
    			<hgroup>
    				<h2>canvas 教程</h2>
    				<h3>绘制二次贝塞尔曲线(点击鼠标滑动) / 绘制弧线</h3>
    			</hgroup>
    			<canvas width="400" height="400" id="canvas-radial">
    				您需要更新浏览器呢 凸^-^凸
    			</canvas>
    		</section>
    		<section class="four">
    			<hgroup>
    				<h2>canvas 教程</h2>
    				<h3>脉动 （点击圆内）</h3>
    			</hgroup>
    			<canvas width="400" height="400" id="canvas-is-path">
    				您需要更新浏览器呢 凸^-^凸
    			</canvas>
    		</section>
    	</body>
    </html>

[个人主页：][Link 1][http://www.itit123.cn/][http_www.itit123.cn] 更多干货等你来拿

[Center]: /images/20220731/54eb62fecf7843b0b6e2305712126f19.png
[Link 1]: http://blog.csdn.net/qq_19558705/article/details/51993884
[http_www.itit123.cn]: http://www.itit123.cn/