HTML5之CANVAS 属性和方法的示例汇总

最新推荐文章于 2023-03-10 15:41:37 发布

全栈技术圈

最新推荐文章于 2023-03-10 15:41:37 发布

阅读量836

点赞数

分类专栏： html5 文章标签： canvas 属性

本文链接：https://blog.csdn.net/chen_wen_xian/article/details/12243161

版权

html5 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.οnlοad=function(){
/*	*/ 
	/矩形  
		var c=document.getElementById("myRect");  
		var cxt=c.getContext("2d");  
		cxt.fillStyle="#FF0000"; 
		//方法填充一个矩形。 
		X,Y,width,height  
		//矩形的左上角的坐标;矩形的大小。
		cxt.fillRect(0,0,150,75);  
	/end  
		  
	  
	线段///  
		var c=document.getElementById("myLine");  
		var cxt=c.getContext("2d");  
		X,Y  
		cxt.moveTo(10,10);  
		cxt.lineTo(150,50);  
		cxt.lineTo(10,50);  
		cxt.lineTo(10,10);  
		cxt.stroke();  
	/end///  

	//两条线段/
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		
		方法开始一条路径，或重置当前的路径。
		ctx.beginPath();
		
		//属性设置或返回当前线条的宽度，以像素计。
		ctx.lineWidth="5";
		
		//属性设置或返回用于笔触的颜色、渐变或模式。(来填充颜色)
		ctx.strokeStyle="red"; // 红色路径
		
		//x,y
		//路径的目标位置的x坐标;路径的目标位置的y坐标
		ctx.moveTo(0,75);
		//方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。
		ctx.lineTo(250,75);
		//方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
		ctx.stroke(); // 进行绘制
		
		ctx.beginPath();
		ctx.strokeStyle="blue"; // 蓝色路径
		ctx.moveTo(50,0);
		ctx.lineTo(150,130);
		ctx.stroke(); // 进行绘制
	/end/	
	  
	///用渐变进行填充 
	 	var c=document.getElementById("myCanvas2");
		var ctx=c.getContext("2d");
		
		// 方法创建线性的渐变对象。
		//x0,y0,x1,y1
		//渐变开始点的 x 坐标;渐变开始点的 y 坐标;渐变结束点的 x 坐标;渐变结束点的 y 坐标
		var gradient=ctx.createLinearGradient(0,0,170,0);
		//开始颜色 
		gradient.addColorStop("0","magenta");
		gradient.addColorStop("0.5","blue");
		gradient.addColorStop("1.0","red");
		
		// 用渐变进行填充
		ctx.strokeStyle=gradient;
		ctx.lineWidth=5;
		//方法绘制矩形（不填色）。笔触的默认颜色是黑色。
		//x,y,width,height
		//矩形左上角的x坐标;矩形左上角的y坐标;矩形的宽度，以像素计;矩形的高度，以像素计
		ctx.strokeRect(20,20,150,100);
	 
	/end
	  
	圆形///  
		var c=document.getElementById("myArc");  
		var cxt=c.getContext("2d"); 
		
		// 属性设置或返回用于填充绘画的颜色、渐变或模式。 
		cxt.fillStyle="#ccc"; 
		 
		//方法开始一条路径，或重置当前的路径。
		cxt.beginPath();  
		
		//方法创建弧/曲线（用于创建圆或部分圆）。
		圆心横坐标、纵坐标、半径
		//圆的中心的x坐标;圆的中心的y坐标;圆的半径;起始角，以弧度计。（弧的圆形的三点钟位置是0度）;结束角，以弧度计;可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。  
		cxt.arc(100,100,100,200,Math.PI*2,true);  
		
		//方法创建从当前点到开始点的路径。
		cxt.closePath(); 
		
		//方法填充当前的图像（路径）。默认颜色是黑色。
		//如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。 
		cxt.fill();  
	/end///  
	   
	  
	渐变  
		var c=document.getElementById("myColor");  
		var cxt=c.getContext("2d");  
		
		// 方法创建线性的渐变对象。
		//x0,y0,x1,y1
		//渐变开始点的 x 坐标;渐变开始点的 y 坐标;渐变结束点的 x 坐标;渐变结束点的 y 坐标
		var grd=cxt.createLinearGradient(0,0,175,50);  
		
		/开始颜色 
		grd.addColorStop(0,"#FF0000"); 
		 
		/末端颜色  
		grd.addColorStop(1,"#00FF00");  
		
		// 属性设置或返回用于填充绘画的颜色、渐变或模式。  
		cxt.fillStyle=grd; 
		
		//绘制“已填色”的矩形。默认的填充颜色是黑色。
		//矩形左上角的 x 坐标;矩形左上角的 y 坐标;矩形的宽度，以像素计;矩形的高度，以像素计 
		/x,y,width,height  
		cxt.fillRect(10,10,200,100);  
	end//  
	
	  
	/图片/  
		var c=document.getElementById("myImage");  
		var cxt=c.getContext("2d");  
		var img=new Image();  
		图片路径  
		img.src="1.jpg";
		img.οnlοad=function(){  
			绘制原始图像，（0,0）表示图像的左上角位与canvas画布的位置、定义图片的横、纵坐标  
			cxt.drawImage(img,0,0);  
		}
	/end//  
}

</script>
</head>

<body>
    <canvas id="myRect" width="200" height="100">你的浏览器不支持canvas绘画！</canvas>   
      
    <canvas id="myLine" width="200" height="100">你的浏览器不支持canvas绘画！</canvas>  
      
    <canvas id="myCanvas" height="300" width="200">你的浏览器不支持canvas绘画！</canvas>  
    
    <canvas id="myCanvas2" height="300" width="200">你的浏览器不支持canvas绘画！</canvas>  
     
    <canvas id="myArc" height="300" width="200">你的浏览器不支持canvas绘画！</canvas>  
      
    <canvas id="myColor" height="200" width="100">你的浏览器不支持canvas绘画！</canvas>  
      
    <canvas id="myImage" height="597" width="437">你的浏览器不支持canvas绘画！</canvas>  
    
</body>
</html>

效果图如下：

全栈技术圈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5之CANVAS 属性和方法的示例汇总

无标题文档window.onload=function(){/* */ /////矩形//////////////////////////////// var c=document.getElementById("myRect"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; //方法填充一个矩形
复制链接

扫一扫

专栏目录