html-canvas 直线图形（2）

最新推荐文章于 2023-06-09 11:35:33 发布

power_to_go_l7

最新推荐文章于 2023-06-09 11:35:33 发布

阅读量175

点赞数

分类专栏：前端学习文章标签： html5 canvas

本文链接：https://blog.csdn.net/power_to_go_l7/article/details/90201291

版权

前端学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

[重] W3C坐标系：y轴正方向向下

直线绘制

一条直线

语法：

cxt.moveTo(x1,y1);  //起点坐标，moveTo：将画笔移到（x1,y1）,开始绘制
cxt.lineTo(x2,y2);  //终点坐标，lineTo：将画笔从（x1,y1）开始画，一直到（x2,y2）
//上两句代码仅仅指定起点/终点坐标这两个状态，需调用下面的stroke()方法才有效
cxt.stroke();    //连线

例：

    <body>
		<canvas id="canvas" width="200" height="150" style="border:1px solid red"></canvas>
    </body>
	<script>
		function $$(id){
			return document.getElementById(id);
		}
		window.onload = function(){
			var cnv = $$("canvas");
			var cxt = cnv.getContext("2d");
			cxt.moveTo(50,100);
			cxt.lineTo(150,50);
			cxt.stroke();
		}
	</script>

多条直线

语法：

cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.lineTo(x3,y3);    //多个lineTo()方法
...
cxt.stroke();

例：

//两条直线，有交点
cxt.moveTo(50,100);
cxt.lineTo(150,50);
cxt.lineTo(100,90);

//两条直线无交点
cxt.moveTo(200,100);
cxt.lineTo(250,60);
cxt.moveTo(180,100);
cxt.lineTo(250,50);
			
//三角形
cxt.moveTo(20,30);
cxt.lineTo(20,60);
cxt.lineTo(60,60);
cxt.lineTo(20,30);
			
//矩形
cxt.moveTo(160,160);
cxt.lineTo(300,160);
cxt.lineTo(300,250);
cxt.lineTo(160,250);
cxt.lineTo(160,160);
cxt.stroke();

矩形绘制

在canvas中，矩形分为两种：“描边”矩形和“填充”矩形

描边矩形

语法：

注：strokeStyle是context对象的一个属性，strokeRect()是context对象的一个方法
//当两句代码顺序互换后，strokeStyle属性不会生效
cxt.strokeStyle = 属性值;
cxt.strokeRect(x,y,width,height);

填充矩形

语法：

注：fillStyle是context对象的一个属性，fillRect()是context对象的一个方法
//fillStyle属性同strokeStyle，fillRect()方法同strokeRect()方法
//当两句代码顺序互换后，fillStyle属性不会生效
cxt.fillStyle = 属性值;
cxt.filRect(x,y,width,height);

例：描边+填充

window.onload = function(){
	var cnv= $$("canvas");
	var cxt = cnv.getContext("2d");
	//描边矩形
	//strokeStyle()有三种取值（颜色值、渐变色、图案）
	cxt.strokeStyle = "#FF0000";	// red、rgb(255,0,0)、rgba(255,0,0,0.8)
	//strokeRect()用于确定矩形坐标（x,y为左上角坐标）
	cxt.strokeRect(50,50,80,80);
			
	//描边+填充
	cxt.strokeStyle = "black";
	cxt.strokeRect(140,140,50,50);
	cxt.fillStyle = "rgba(255,0,0,0.5)";
	cxt.fillRect(140,140,50,50);
}

rect()方法

语法：

rect(x,y,width,height);

注：

rect()方法在调用后并不会把矩形绘制出来，只有在使用rect()方法后调用stroke()或fill()方法，才会把矩形绘制出来。

例：

//rect()方法
//绘制描边矩形
cxt.strokeStyle="red";
cxt.rect(150,50,80,80);
cxt.stroke();
//绘制填充矩形
cxt.fillStyle="#FFE8E8";
cxt.rect(150,50,80,80);
cxt.fill();

清空矩形

语法：

cxt。clearRect(x,y,width,height);

例：

//清空矩形
cxt.fillStyle = "HotPink";
cxt.fillRect(50,200,50,50);
cxt.clearRect(65,215,20,20);


//绑定点击事件
cxt.fillStyle = "rgba(255,0,0,0.5)";
cxt.fillRect(50,50,80,80);
var btn = $$("btn");
btn.onclick= function(){
    //删除某一块
    //cxt.clearRect(60,60,40,40);
    //删除canvas
    cxt.clearRect(0,0,cnv.width,cnv.height);
}

注：

所有Canvas图形操作的属性和方法都是基于context对象的

多边形

canvas绘制箭头

事先确定箭头的7个顶点坐标，然后使用moveTo()和lineTo()来绘制。

canvas绘制正多边形

正三角形分析 根据正三角形的特点，可以将其封装一个绘制正多边形的函数：createPolygon()

例：

<body>
		<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
	</body>
	<script>
		function $$(id){
			return document.getElementById(id);
		}
		window.onload = function(){
			var cnv = $$("canvas");
			var cxt = cnv.getContext("2d");
			//调用自定义的方法createPolygon()
			createPolygon(cxt,3,100,75,50);
			cxt.fillStyle = "HotPink";
			cxt.fill();
		}
		/*
		 * n:表示n边型
		 * dx，dy:表示n边形中心坐标
		 * size:表示n边形大小
		 */
		function createPolygon(cxt,n,dx,dy,size){
			cxt.beginPath();    //开始一条新路径
			var degree = (2*Math.PI)/n;
			for(var i=0;i<n;i++){
				var x = Math.cos(i*degree);
				var y = Math.sin(i*degree);
				cxt.lineTo(x*size+dx,y*size+dy);
			}
			cxt.closePath();    //关闭路径
		}
	</script>

createPolygon()只能绘制“正多边形”，不可以用于绘制“不规则多边形”。

绘制五角星

先获取各个顶点的坐标，再用moveTo()和lineTo()把五角星绘制出来。

例：

function $$(id){
	return document.getElementById(id);
}
window.onload = function(){
    var cnv = $$("canvas");
    var cxt = cnv.getContext("2d");
    cxt.beginPath();
    for(var i=0;i<5;i++){
		cxt.lineTo(Math.cos((18+i*72)*Math.PI / 180)*50+100,-Math.sin((18+i*72)*Math.PI / 180)*50+100);
		cxt.lineTo(Math.cos((54+i*72)*Math.PI / 180)*25+100,-Math.sin((54+i*72)*Math.PI / 180)*25+100);
	}
	cxt.closePath();
	cxt.stroke();
}

绘制调色板

方格调色板，例：

window.onload = function(){
	var cnv = $$("canvas");
	var cxt = cnv.getContext("2d");
	for(var i=0;i<6;i++){
		for(var j=0;j<6;j++){
			cxt.fillStyle="rgb("+Math.floor(255-42.5*i)+","+Math.floor(255-42.5*j)+",0)";
			cxt.fillRect(j*25,i*25,25,25);
		}
	}
}

渐变调色板，例：

var r=255,g=0,b=0;
for(i=0;i<150;i++){
    if(i<25) 
	    g+=10;
    else if(i>25&&i<50) 
	    r-=10;
    else if(i>50&&i<75) {
	    g-=10; b+=10; 
    }
    else if(i>=75&&i<100) 
	    r+=10;
    else b-=10;
    cxt.fillStyle = "rgb("+r+","+g+","+b+")";
    cxt.fillRect(3*i,0,3,cnv.height);
}