canvas入门笔记（上）

Canvas

Canvas简介

Canvas API 提供了一个通过JavaScript 和 HTML的``元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

Canvas使用

在HTML页面当中新建一个画板

<canvas id="cont">/*此处书写内容在高版本浏览器内无内容*/
</canvas>

Step1

获取画布（必须使用原生js获取）

var canvas =document.querySelector('#cont')

Step2

获取画布上下文

var content =canvas.getContext('2d');

Step3

开启一条路径

content.beginPath();

Step4

确定画布起始点

content.moveTo(100,100);

Step5

确定画布结束点

content.lineTO(400,400);

Step6

着色

content.stroke()

Step

结束路径

content.closePath();

Canvas画直线

默认直线

<style>#myline{border: 1px solid black;}
</style>
<body><canvas id="myline" width="500" height="500"></canvas>
</body>
<script>//获取画布var canvas=document.querySelector("#myline");//获取上下文var ct =canvas.getContext('2d');//开始一条路径ct.beginPath();//画画起点ct.moveTo(100,100);//画画结束点ct.lineTo(400,400);//着色ct.stroke();//关闭路径ct.closePath();</script>

效果图

在这里插入图片描述

自定义直线

在着色前添加以下代码

//线条颜色
ct.strokeStyle='green';
//线条宽度
ct.lineWidth=5

完整代码

<style>#myline{border: 1px solid black;}
</style>
<body><canvas id="myline" width="500" height="500"></canvas>
</body>
<script>//获取画布var canvas=document.querySelector("#myline");//获取上下文var ct =canvas.getContext('2d');//开始一条路径ct.beginPath();//画画起点ct.moveTo(100,100);//画画结束点ct.lineTo(400,400);//着色前添加//设置线条颜色ct.strokeStyle='green'//设置线条粗细ct.lineWidth=5;//着色ct.stroke();//关闭路径ct.closePath();</script>

效果图

在这里插入图片描述

Canvas画矩形

绘制实心矩形

矩形样式

ct.fillStyle='red';
//
ct.fillRect(200,200,20,200)

效果图

在这里插入图片描述

绘制空心矩形

ct.strokeRect(180,200,20,200)

效果图

在这里插入图片描述

画随机柱形统计图

  ct.fillStyle='red';for(var i=0;i<7;i++){var height =Math.random()*180+10;ct.fillRect(120+i*40,300-height,20,height)}

效果图

在这里插入图片描述

随机颜色统计图

ct.fillStyle='#'+parseInt(Math.random()*0xffffff).toString(16)

效果图

在这里插入图片描述

清除画布

ct.clearRect(x,y,width,height);

首先画一个矩形

<style>#mycanvas{display: block;border: 1px solid black;margin: 0 auto ;}
</style>
<body><canvas id="mycanvas" width="500" height="500"> </canvas>
</body>
<script>var canvas =document.querySelector('#mycanvas');var ct =canvas.getContext('2d');ct.fillStyle='green'ct.fillRect(200,200,200,200);//清除画布内容ct.clearRect(210,230,100,100)
</script>

效果图

在这里插入图片描述

Canvas圆与圆弧

圆

方法

ct.arc(x,y,radius,startAngle,endAngle,countclockwish)/*x:中心点坐标xy:中心的坐标yradius:半径startAngle:开始的角度endAngle:结束的角度conutclockwish:旋转方向 false 顺时针，true逆时针
*/

在这里插入图片描述

0度起始点

画一个圆

<style>#mycanvas{margin: 0 auto;border: 1px solid black;display: block;}
</style>
<body><canvas id="mycanvas" width="500" height="500"></canvas>
</body>
<script>var canvas =document.querySelector("#mycanvas");var ct =canvas.getContext('2d');ct.beginPath()ct.arc(255,255,50,0,Math.PI*2,true)ct.fillStyle='green'   //填充样式ct.fill()			//填充ct.lineWidth='5'		ct.stroke();
</script>

效果图

在这里插入图片描述

圆弧

  var canvas =document.querySelector("#mycanvas");var ct =canvas.getContext('2d');ct.beginPath()ct.lineWidth='5'ct.arc(255,400,50,1,2,false)ct.stroke()

效果图

在这里插入图片描述

Canvas画茶杯Demo

	var canvas =document.querySelector('#mycanvas');var ct=canvas.getContext('2d');//画一个茶杯ct.beginPath();ct.moveTo(100,200)ct.lineTo(100,450)ct.lineTo(300,450)ct.lineTo(300,200)ct.lineTo(100,200)ct.lineWidth='3'ct.stroke();ct.closePath();//画一个茶杯手柄ct.beginPath();ct.arc(300,325,50,-(Math.PI/2),Math.PI/2,false)ct.lineWidth='3'ct.stroke()ct.closePath();//热气for(var i=0 ;i<4;i++){ct.beginPath();ct.arc(120+60*i,100,20,-Math.PI/2,Math.PI/2,true)ct.arc(120+60*i,140,20,-Math.PI/2,Math.PI/2,false)ct.stroke()}

效果图

在这里插入图片描述

Canvas圆环加载条

var canvas =document.querySelector('#mycanvas');var ct=canvas.getContext('2d');var fnb=Math.PI/180;var db=0;var a=setInterval(()=>{// console.log(fnb)db+=fnb;drowpic(db)if(db>Math.PI*2){clearTimeout(a)}},100)var drowpic=function(fnb){ct.beginPath();ct.lineWidth='5'ct.strokeStyle='red'ct.arc(300,300,50,0,fnb,false);ct.stroke();ct.closePath();}

效果图

在这里插入图片描述

Canvas碰撞小球

    var canvas =document.querySelector('#mycanvas');var ct=canvas.getContext('2d');// 画布大小var h=500;var w=500;//初始化var x=40;var y=50//速度var speedx=5;var speedy=5;setInterval(function(){ct.clearRect(0,0,w,h)x+=speedx;y+=speedy;if(x<=30 || x>=(w-50)){speedx=-speedx;}if(y<=50 ||y>=(h-50)){speedy= -speedy}ct.beginPath();ct.arc(x,y,30,0,Math.PI*2,false)ct.strokeStyle='green';ct.fillStyle='green'ct.fill();ct.stroke();},10)

效果图

在这里插入图片描述

动态

Canvas面向对象小球碰撞

    var canvas =document.querySelector('#mycanvas');var ct=canvas.getContext('2d');var h=500;var w=500;//定义一个随机产生器var ran=function(num){return Math.random()*num;}//定义Ball球类var Ball=function(){//Ball球类属性=/初始点X，初始点Y，半价radius，颜色Color，水平速度Xspeed，垂直速度Yspeedthis.x=50;this.y=50;this.radius=ran(20)+10;     //大小[10-30]this.color='#'+parseInt(ran(0xffffff)).toString(16);this.Xspeed=ran(4)+2;     //速度[2-6]this.Yspeed=ran(5)+2      //速度[2-7]}//放入页面的方法Ball.prototype.show= function(){//运动this.run();ct.beginPath();ct.arc(this.x,this.y,this.radius,0,Math.PI*2,false);ct.fillStyle=this.color;ct.fill();ct.stroke();}//运动方法Ball.prototype.run=function(){if(this.x<=30 || this.x>=(w-30)){this.Xspeed=-this.Xspeed;}this.x+=this.Xspeed;if(this.y<=30 ||this.y>=(h-30)){this.Yspeed= -this.Yspeed;}this.y+=this.Yspeed;}//定义一个数组存放小球var ballArray=[];for(var i=1;i<=5;i++){var ball=new Ball();ballArray.push(ball);ball.show();}//运动setInterval(()=>{ct.clearRect(0,0,w,h);for(var j=0;j<ballArray.length;j++){var ball= ballArray[j];ball.show();}},50)

效果图

在这里插入图片描述

随机跳动

Canvas画文字

ct.fillText('hello',200,200)

实心文字

   var canvas =document.querySelector('#mycanvas');var ct=canvas.getContext('2d');ct.fillStyle='red'ct.font='100px 微软雅黑'ct.fillText('Hello',200,200,50);

效果图

在这里插入图片描述

空心文字

 var canvas =document.querySelector('#mycanvas');var ct=canvas.getContext('2d');ct.fillStyle='red'ct.font='100px 微软雅黑'ct.fillText('Hello',200,200);//空心文字ct.strokeStyle='yellow'ct.strokeText('Hello',100,100)

效果图

在这里插入图片描述

,200)


### 实心文字~~~jsvar canvas =document.querySelector('#mycanvas');var ct=canvas.getContext('2d');ct.fillStyle='red'ct.font='100px 微软雅黑'ct.fillText('Hello',200,200,50);

效果图

[外链图片转存中…(img-zwbvQoiY-1703316803433)]

空心文字

 var canvas =document.querySelector('#mycanvas');var ct=canvas.getContext('2d');ct.fillStyle='red'ct.font='100px 微软雅黑'ct.fillText('Hello',200,200);//空心文字ct.strokeStyle='yellow'ct.strokeText('Hello',100,100)