canvas入门笔记（上）

Canvas

Canvas简介

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

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

Canvas使用

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

html 复制代码

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

Step1

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

js 复制代码

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

Step2

获取画布上下文

js 复制代码

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

Step3

开启一条路径

js 复制代码

content.beginPath();

Step4

确定画布起始点

js 复制代码

content.moveTo(100,100);

Step5

确定画布结束点

js 复制代码

content.lineTO(400,400);

Step6

着色

js 复制代码

content.stroke()

Step

结束路径

js 复制代码

content.closePath();

Canvas画直线

默认直线

html 复制代码

<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>

效果图

自定义直线

在着色前添加以下代码

js 复制代码

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

完整代码

html 复制代码

<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画矩形

绘制实心矩形

矩形样式

js 复制代码

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

效果图

绘制空心矩形

js 复制代码

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

效果图

画随机柱形统计图

js 复制代码

  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)
    }

效果图

随机颜色统计图

js 复制代码

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

效果图

清除画布

js 复制代码

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

首先画一个矩形

html 复制代码

<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圆与圆弧

圆

方法

js 复制代码

ct.arc(x,y,radius,startAngle,endAngle,countclockwish)

/*
	x:中心点坐标x
	y:中心的坐标y
	radius:半径
	startAngle:开始的角度
	endAngle:结束的角度
	conutclockwish:旋转方向 false 顺时针，true逆时针
*/

0度起始点

画一个圆

html 复制代码

<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>

效果图

圆弧

js 复制代码

  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

js 复制代码

	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圆环加载条

js 复制代码

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碰撞小球

js 复制代码

    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面向对象小球碰撞

js 复制代码

    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，垂直速度Yspeed
        this.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画文字

js 复制代码

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

实心文字

js 复制代码

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

效果图

空心文字

js 复制代码

 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)

### 实心文字

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

效果图

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

空心文字

js 复制代码

 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)

效果图

[外链图片转存中...(img-9SyJQL5A-1703316803433)]