canvas 从零开始升华

话不多少  直接上代码   注释很 详细   

创建canvas并画一条线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    
    </style>
</head>
<body>
    <!-- 注意:canvas的高宽最好通过属性设置 通过css样式设置会导致画布拉升导致画的内容失真 -->
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
        //获取画布
    var cans = document.getElementById('cans');
    //获取画布上下文
    var pen = cans.getContext('2d');
    //开始一条路径
    pen.beginPath();    
    //确定起点
    pen.moveTo(100,100);
        //确定结束点
    pen.lineTo(400,100);
    //设置颜色
    pen.strokeStyle='red';
        //设置宽度
        pen.lineWidth = 2 ;
    //着色
    pen.stroke();
    //结束路径
    pen.closePath()
    
    
    </script>
</body>
</html>
View Code

通过简单的封装简化划线

         <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
      margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    
    </style>
</head>
<body>
    <canvas id="cans" width="500px"  height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
        //获取画布
    var cans = document.getElementById('cans');
    //获取画布上下文
    var pen = cans.getContext('2d');

runcanvs(100,100,400,100,'red',2);
runcanvs(400,100,400,400,'green',2);
runcanvs(400,400,100,400,'yellow',2);
runcanvs(100,400,100,100,'blue',2);
//为其封装函数  方便调用
function runcanvs(x1,y1,x2,y2,color,width ){
    pen.beginPath();    
    pen.moveTo(x1,y1);
    pen.lineTo(x2,y2);
    pen.strokeStyle=color;
    pen.lineWidth = width;
    pen.stroke();
    pen.closePath()
}

//直线多用
// pen.beginPath();    
//     pen.moveTo(100,100);
//     pen.lineTo(400,100);
//     //lineTo可以多次调用
//     pen.lineTo(400,400);
//     pen.lineTo(100,400);
//     pen.strokeStyle='red';
//     pen.lineWidth = 2 ;
//     pen.stroke();
//     pen.closePath()
    


    </script>
</body>
</html>
View Code

清除画布上的类容(相当于橡皮檫)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
    pen.fillStyle='green';
    pen.fillRect(100,100,300,300);
   //清除画布
//    pen.clearRect(x,y,width,height)     x,y起始坐标    width,height 清除的高宽
        pen.clearRect(120,120,100,100)


    </script>
</body>
</html>
View Code

 

画虚线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    
    </style>
</head>
<body>
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
    function runcanvs(x1,y1,x2,y2,color,width ){
    pen.beginPath();    
    pen.moveTo(x1,y1);
    pen.lineTo(x2,y2);
    pen.strokeStyle=color;
    pen.lineWidth = width;
    pen.stroke();
    pen.closePath()
}
    //画虚线  
for (var i = 0 ;i < 20;i++){
    runcanvs(100+10*i,100,105+10*i,100,'red',2);
}    
//通过改变y轴的参数可以纵向虚线
for (var i = 0 ;i < 20;i++){
    runcanvs(100,100+10*i,100,105+10*i,'red',2);
} 
//通过同时改变x,y轴的参数 画斜向 的虚线
for (var i = 0 ;i < 20;i++){
    runcanvs(100+10*i,100+10*i,105+10*i,105+10*i,'red',2);
} 


    
    </script>
</body>
</html>
View Code

画矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    
    </style>
</head>
<body>
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
    //画3种类型的矩形
    //第一种 可以描边 可以填充
    // pen.rect(x,y,width,height)  绘制矩形  x,y起始的坐标  width,height宽高
    pen.rect(100,100,100,100);
    //需要同时描边和填充的时候 需要先填充在描边  (先描边后填充的话会导致描的边被填充的颜色覆盖)
//填充
//设置颜色
pen.fillStyle='red';
//填充颜色
pen.fill();
//描边
//设置描边的颜色
pen.strokeStyle='bule';
//设置描边的宽度
pen.lineWidth=5
//应用描边
pen.stroke();


    //第二种 可以填充 不能描边
// fillRect(x,y,widht,height) 实心的矩形  属性同rect
//设置填充的颜色 不然会依然使用上面的颜色
pen.fillStyle='gold';
//调用画矩形的函数画出矩形
pen.fillRect(300,100,100,100);

    //第三种 可以描边 不能填充
// strokeRect(x,y,widht,height)  属性同上  
//设置颜色和宽度
pen.strokeStyle='purple';
pen.lineWidth=6;
//应用样式生成 矩形
pen.strokeRect(100,300,100,100);



    </script>
</body>
</html>
View Code

通过举行生成一个统计图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    
    </style>
</head>
<body>
    <button id="btn1">stop</button>
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
//定义坐标轴

//定义数据条形图
    // pen.fillStyle='red';
    // pen.fillRect(200,200,20,200);



    //随机生成数据条形图
   
        pen.beginPath();
    pen.moveTo(100,100);
    pen.lineTo(100,400);
    pen.lineTo(400,400);
    pen.stroke();
    pen.closePath();
        for (var i=0 ;i<7;i++) {
var heig= parseInt(Math.random()*280)+10;
    var str = Math.random().toString(16).slice(-6)
    console.log(str);
    pen.fillStyle='#'+str;
    pen.fillRect(120+40*i,400-heig,20,heig);
}

         
 
   



    </script>
</body>
</html>
View Code

画一格圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
  //画圆
  //pen.arc(x,y,radius,startAngle,endAngle,counterclockwise)
  //x,y 圆心的坐标
  //radius 半径的长度
  //startAngle 开始的度数   x轴 0-----→∞   的方向为0度
  //endAngle 结束的毒素    y轴   0↓-∞   的方向为 正的1/2π 度
  pen.arc(200,200,100,0,Math.PI,false);
  //描边宽度
  pen.lineWidth=10;
  //填充颜色
  pen.fillStyle='red';
  pen.fill();

  //应用描边
pen.stroke();

//应用升级
pen.beginPath();
pen.arc(100,100,50,0,Math.PI,true)
pen.stroke();

pen.beginPath();
pen.arc(200,100,50,0,Math.PI,false);
pen.stroke();


//同心圆
pen.beginPath();
pen.arc(200,200,50,Math.PI*2,false);
pen.stroke();

pen.beginPath();
pen.arc(200,200,150,Math.PI*2,false);
pen.stroke();


pen.beginPath();
pen.arc(200,200,180,Math.PI*2,false);
pen.stroke();

    </script>
</body>
</html>
View Code

动态画圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
    //动态画圆
    //将圆度分为360度
    var deg = Math.PI*2/360;
    //设置变量用于  逐渐增大 度数
    var counter = 0;
    //设置定时器
    var timer = setInterval(function(){
        pen.beginPath();
        counter++;
        pen.arc(200,200,100,0,counter*deg,false);
        pen.lineWidth=4;
        pen.strokeStyle='red';
        pen.stroke();
        if(counter==360){
            clearInterval(timer);
        }
    },50)

    </script>
</body>
</html>
View Code

通过碰撞检测让一个圆在固定范围类来回的弹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
   //collision detection碰撞检测
   var w = 500;
   var h = 500;
    var x = 50;
    var y = 50;
    var r = 25;
    var xspeed = 3;
    var yspeed = 1;
    var timer = setInterval(function(){
        pen.clearRect(0,0,w,h);
        pen.beginPath();
        if(x-r<0||x+r>w){
            xspeed = -xspeed;
        }
        if(y-r<0||y+r>h){
            yspeed = -yspeed;
        }
        x = x+xspeed;
        y = y+yspeed;
        drawcircle(x,y,r);

    },10)


function drawcircle(x,y,r){
    pen.arc(x,y,r,0,Math.PI*2);
    pen.fillStyle='red';
    pen.fill();
}

    </script>
</body>
</html>
View Code

通过碰撞检测和封装对象生成多个圆在固定范围类来回的弹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
   //collision detection碰撞检测
   var w = 500;
   var h = 500;
   function r(num){
       return Math.random()*num;
   }
   //定义生成的小球的属性
 function Ball(){
    // this.x = r(500);
    // this.y = r(500);

    // this.x = r(60)+60;
    // this.y = r(60)+60;
    this.x = 60;
    this.y = 60;
    this.r = r(30)+10;
    this.color = '#'+Math.random().toString(16).slice(-6);
    this.xspeed = r(2)+6;
    this.yspeed = r(3)+7;
 }
//定义小球显示的方法
 Ball.prototype.show = function(){
     pen.beginPath();
     pen.arc(this.x,this.y,this.r,0,Math.PI*2);
     pen.fillStyle = this.color;
     pen.fill();
     this.run();

 }

 //定义小球的运动方法  (collision detection)
 Ball.prototype.run = function(){
    if(this.x-this.r<=0||this.x+this.r>=w){
        this.xspeed = -this.xspeed;
        }
        if(this.y-this.r<=0||this.y+this.r>=h){
            this.yspeed = -this.yspeed;
        }
        this.x = this.x+this.xspeed;
        this.y = this.y+this.yspeed;
 }




// new Ball().show()
// new Ball().show()
// new Ball().show()
//用循环生成多个小球

var ballArr = [];
for (let i= 0; i < 200; i++) {
    var ball = new Ball();
    ballArr.push(ball);
    ball.show();
    
}

 setInterval(() => {
     //清除画布
     pen.clearRect(0,0,w,h);
     for(var i=0;i<ballArr.length;i++){
         var ball = ballArr[i];
         //跟新小球坐标 让其动起来
        //  ball.run();
         //刷新
         ball.show()
     }
 }, 20);




    </script>
</body>
</html>
View Code

让多个圆连线并添加文字和碰撞检测

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
       /** @type {HTMLCanvasElement} */  
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
    //定义高宽
    var w = 500;
    var h =500;

//定义一堆文字
var titleArr = "html html5 css javascript  scss  bootstrap vue vuex axios jquery dom bom nodejs http https ajxa".split(' ')

    //产生随机数
    function r(num){
       return Math.random()*num;
   }
//创建小球类
function Ball(text){
    //随机位置产生小球
    this.x = r(380)+60;
    this.y = (380)+60;
    this.r = r(30)+10;
    this.color = '#'+Math.random().toString(16).slice(-6);
    this.xspeed = r(2)+2;
    this.yspeed = r(3)+3;
    //接收外部参数
    this.text = text;
}

//生成小球
Ball.prototype.show = function(){
    this.run()//更新小球坐标
    drawCircle(this.x,this.y,this.r,this.color)//画小球
    drawText(this.text,this.x+this.r,this.y)//画文字
 }

//collision detecation
Ball.prototype.run = function(){
    if(this.x-this.r<=0||this.x+this.r>=w){
        this.xspeed = -this.xspeed;
        }
        if(this.y-this.r<=0||this.y+this.r>=h){
            this.yspeed = -this.yspeed;
        }
        this.x = this.x+this.xspeed;
        this.y = this.y+this.yspeed;
 }



    //画直线
function darwLine(x1,y1,x2,y2,color){
    pen.beginPath();
    pen.moveTo(x1,y1);
    pen.lineTo(x2,y2);
    pen.strokeStyle=color||'#000';
    pen.stroke();
    pen.closePath();
}


//画文字
function drawText(text,x,y){
    pen.font = '20px 仿宋';
    pen.textAlign = 'top';
    pen.textBaseline = 'middle';
    pen.fillText(text,x,y);
}


//画圆
function drawCircle(x,y,r,color){
    pen.beginPath();
    pen.arc(x,y,r,0,Math.PI*2);
    pen.fillStyle=color||"#000";
    pen.fill();


}
//测试是否生成了小球
// new Ball().show();



//定义一个数组来存放生成的多个小球
var ballArr = [];
for (let i = 0; i < 5; i++) {
    //i当前小球
    var ball = new Ball(titleArr[i]);
    ballArr.push(ball);
    ball.show();
    //小球的连线
    for (let j = 0; j< i; j++) {
        //取出当前小球前面的小球     
        var prevBall = ballArr[j];
        darwLine(ball.x,ball.y,prevBall.x,prevBall.y,ball.color)

    }


}
//小球运动
setInterval(() => {
    //清除画布
    pen.clearRect(0,0,w,h);
    for (let i= 0; i < ballArr.length; i++) {
            var ball = ballArr[i];
            ball.show();       
        for (let j = 0; j< i; j++) {
        //取出当前小球前面的小球     
        var prevBall = ballArr[j];
        darwLine(ball.x,ball.y,prevBall.x,prevBall.y,ball.color)
        

    } 
    }

},150);

    </script>
</body>
</html>
View Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
  *{
      margin: 0;padding: 0;
  }
    </style>
</head>
<body>
    <canvas id="cans" >您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
       /** @type {HTMLCanvasElement} */  
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
    //定义高宽
    var w = document.documentElement.clientWidth-6;
    var h =document.documentElement.clientHeight-6;
        cans.width = w;
        cans.height = h;

//定义一堆文字
var titleArr = "html html5 css javascript  scss  bootstrap vue vuex axios jquery dom bom nodejs http https ajxa".split(' ')

    //产生随机数
    function r(num){
       return Math.random()*num;
   }
//创建小球类
function Ball(text){
    //随机位置产生小球
    this.x = r(380)+60;
    this.y = (380)+60;
    this.r = r(30)+10;
    this.color = '#'+Math.random().toString(16).slice(-6);
    this.xspeed = r(2)+2;
    this.yspeed = r(3)+3;
    //接收外部参数
    this.text = text;
}

//生成小球
Ball.prototype.show = function(){
    this.run()//更新小球坐标
    drawCircle(this.x,this.y,this.r,this.color)//画小球
    drawText(this.text,this.x+this.r,this.y)//画文字
 }

//collision detecation
Ball.prototype.run = function(){
    if(this.x-this.r<=0||this.x+this.r>=w){
        this.xspeed = -this.xspeed;
        }
        if(this.y-this.r<=0||this.y+this.r>=h){
            this.yspeed = -this.yspeed;
        }
        this.x = this.x+this.xspeed;
        this.y = this.y+this.yspeed;
 }



    //画直线
function darwLine(x1,y1,x2,y2,color){
    pen.beginPath();
    pen.moveTo(x1,y1);
    pen.lineTo(x2,y2);
    pen.strokeStyle=color||'#000';
    pen.stroke();
    pen.closePath();
}


//画文字
function drawText(text,x,y){
    pen.font = '20px 仿宋';
    pen.textAlign = 'top';
    pen.textBaseline = 'middle';
    pen.fillText(text,x,y);
}


//画圆
function drawCircle(x,y,r,color){
    pen.beginPath();
    pen.arc(x,y,r,0,Math.PI*2);
    pen.fillStyle=color||"#000";
    pen.fill();


}
//测试是否生成了小球
// new Ball().show();



//定义一个数组来存放生成的多个小球
var ballArr = [];
for (let i = 0; i < 5; i++) {
    //i当前小球
    var ball = new Ball(titleArr[i]);
    ballArr.push(ball);
    ball.show();
    //小球的连线
    // for (let j = 0; j< i; j++) {
    //     //取出当前小球前面的小球     
    //     var prevBall = ballArr[j];
    //     darwLine(ball.x,ball.y,prevBall.x,prevBall.y,ball.color)

    // }


}
//小球运动
setInterval(() => {
    //清除画布
    pen.clearRect(0,0,w,h);
    for (let i= 0; i < ballArr.length; i++) {
            var ball = ballArr[i];
            ball.show();       
        for (let j = 0; j< i; j++) {
        //取出当前小球前面的小球     
        var prevBall = ballArr[j];
        darwLine(ball.x,ball.y,prevBall.x,prevBall.y,ball.color)
        

    } 
    }

},10);

    </script>
</body>
</html>
View Code

随着鼠标的移动生成圆并逐渐缩小消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
  *{
      margin: 0;padding: 0;
  }
    </style>
</head>
<body>
    <canvas id="cans" >您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
       /** @type {HTMLCanvasElement} */  
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
    //定义高宽
    var w = document.documentElement.clientWidth-6;
    var h =document.documentElement.clientHeight-6;
        cans.width = w;
        cans.height = h;
     //产生随机数
     function r(num){
       return Math.random()*num;
   }
   //创建小球类
function Ball(x,y){
    //随机位置产生小球
    this.x = x;
    this.y = y;
    this.r = 60;
    this.color = '#'+Math.random().toString(16).slice(-6);
  
}
//生成小球
Ball.prototype.show = function(){
    //半径逐渐减小
    this.r--;
    drawCircle(this.x,this.y,this.r,this.color)//画小球
 }
function drawCircle(x,y,r,color){
    pen.beginPath();
    pen.arc(x,y,r,0,Math.PI*2);
    pen.fillStyle=color||"#000";
    pen.fill();


}

var ballArr =[];
window.onmousemove=function(e){
    var ball = new Ball(e.x,e.y);
    ball.show();
    ballArr.push(ball);
    
}


setInterval(() => {
    pen.clearRect(0,0,w,h);
    for (let i = 0; i < ballArr.length; i++) {
        var ball = ballArr[i];
            if(ball.r<10){
                ballArr.splice(i,1);
            }else{
                ball.show();
            }

    }


}, 10);
    </script>
</body>
</html>
View Code

 

画一个字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    
    </style>
</head>
<body>
    <button id="btn1">stop</button>
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
   //画文字
   //fillText()  在画布上绘制填色的文字,默认颜色是黑色
   //fillText(text,x,y,maxWidth)
   //text 规定在画布上输出的文本
   //x,y  相对于画布的起始坐标
   //maxWidth 可选 允许最大的文本宽度,单位为像素


//设置字体相关的样式通过font 属性
pen.font = '100px 宋体';
//设置文字颜色
pen.fillStyle = 'red';
//画文字
pen.fillText('hello',250,250)



//绘制空心文字
//设置颜色
pen.strokeStyle = 'gold'
pen.strokeText('你好',0,250);


//设置文字颜色
pen.fillStyle = 'bule';
//画文字并设置最大宽度
pen.fillText('hello world',100,100,300)







    </script>
</body>
</html>
View Code

对画的字进行样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    
    </style>
</head>
<body>
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
        /** @type {HTMLCanvasElement} */  
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
   //画文字
   //fillText()  在画布上绘制填色的文字,默认颜色是黑色
   //fillText(text,x,y,maxWidth)
   //text 规定在画布上输出的文本
   //x,y  相对于画布的起始坐标
   //maxWidth 可选 允许最大的文本宽度,单位为像素

pen.font = '100px 仿宋';

//设置渐变   从(0,0)坐标开始渲染整个画布宽度  从0%开始?
var grandient = pen.createLinearGradient(0,0,cans.width,0);
//设置宽度百分比颜色渐变
grandient.addColorStop("0",'yellow');
//到50%  边黄
grandient.addColorStop("0.5",'red');
grandient.addColorStop("1",'pink');

//应用渐变色

pen.fillStyle=grandient;
pen.fillText('博客园我的',0,100,500);
pen.strokeStyle=grandient;
pen.strokeText('点赞的都是好人',0,300,500);





    </script>
</body>
</html>
View Code

画的字的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    
    </style>
</head>
<body>
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
        /** @type {HTMLCanvasElement} */  
    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');



pen.beginPath();
pen.moveTo(250,0);
pen.lineTo(250,500);
pen.stroke();
pen.closePath();

pen.beginPath();
pen.moveTo(0,250);
pen.lineTo(500,250);
pen.stroke();
pen.closePath();

pen.font = '100px 仿宋';
//设置水平位置
// pen.textAlign='end';
// pen.textAlign='center';
// pen.textAlign='left';
// pen.textAlign='right';

//设置垂直位置
// pen.textBaseline='top';
// pen.textBaseline='middle';

pen.fillText('HTML5',250,250);





    </script>
</body>
</html>
View Code

 

 画一张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #cans{
        
        margin: 0 auto;
        display: block;
        border: 1px solid red;
    }
    
    </style>
</head>
<body>
    <button id="btn1">stop</button>
    <canvas id="cans" width="500px" height="500px">您的浏览器版本过低请升级您的浏览器或用Chrome打开~~</canvas>
    <script>
        /** @type {HTMLCanvasElement} */  

    var cans = document.getElementById('cans');
    var pen = cans.getContext('2d');
//3种方法
//1 3个参数  context.drawImage(图片,x,y)
//2 5个参数   context.drawImage(图片,x,y,在画布上的宽,在画布上的高)
//3 9 个参数   context.drawImag(图片,裁剪起始x,裁剪y,裁剪宽,裁剪高,在画布上的坐标x,坐标y,图片宽,图片高)
var img = new Image();
img.src = './1 (36).jpg'
//图片加载成功触发函数
img.onload = function(){
//获取图片的宽高
console.log(img.width,img.height)
// pen.drawImage(img,0,0)  //3个参数
// pen.drawImage(img,0,0,250,250)   5个参数
// pen.drawImage(img,0,0,100,100,0,0,100,100)//从0,0裁剪图片宽高个100,放到画布上0,0位置占宽高个100


}
 

    </script>
</body>
</html>
View Code

用画笔实现网页签名的功能

 

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
      <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        body > button:first-child {
          position: fixed;
          top: 200px;
          right: 200px;
        }
        body > button:last-child {
          position: fixed;
          top: 100px;
          right: 200px;
        }
        canvas {
          border: 1px solid red;
        }
      </style>
    </head>
    <body>
      <canvas id="canvas"></canvas>
      <button onclick="downloadIamge()">下载图片</button>
      <button onclick="clearCanvas()">清空画布</button>
    </body>
    <script>
      let can = document.getElementById("canvas");
      let wh = window.innerHeight-50;
      let ww = window.innerWidth-10;
      console.log(wh, ww);

      can.height = wh;
      can.width = ww;
      let pen = can.getContext("2d");

      let downloadIamge = function (imgsrc = "./img", name = "test") {
        //下载图片地址和图片名
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        pen.drawImage(image, 0, 0, can.width, can.height);
        let url = can.toDataURL("image/png"); //得到图片的base64编码数据
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "图片"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
        //   image.src = imgsrc;
      };
      let clearCanvas = function () {
        pen.clearRect(0, 0, 500, 500);
      };
      //鼠标滑动的时候划线
      let checkmouseover = function (el) {
        // console.log(el.clientX, el.clientY);
        pen.lineTo(el.clientX, el.clientY);
        pen.stroke();
      };
//取消单击时画画结束   取消监听 鼠标移动,鼠标离开事件
      let checkmouseup = function (ele) {
        pen.stroke();
        pen.closePath();
        window.removeEventListener("mousemove", checkmouseover);
        window.removeEventListener("mouseleave", checkmouseup);
      };
      //当鼠标 点击的时候开始监听 鼠标移动事件以及 鼠标离开事件
      window.onmousedown = function (e) {
        pen.beginPath();
        pen.moveTo(e.clientX, e.clientY);
        pen.strokeStyle = "pink";//控制画笔颜色
        pen.lineWidth = 10;  //控制划线的 粗细
        window.addEventListener("mousemove", checkmouseover);
        window.addEventListener("mouseup", checkmouseup);
      };
    </script>
  </html>

 

posted @ 2021-03-14 22:46  ComeIntoBud  阅读(73)  评论(0)    收藏  举报