canvas的简单使用

作者: 五四青年_4e7d | 来源:发表于2020-03-03 10:25 被阅读0次

建立一个简单的模板

1.封装函数，建立容器，和canvas样式；
2.页面加载之后执行；
3.注意：canvas.getContext('2d')

<!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>
    #canvas{
        box-shadow: 0 0  10px #333;
        margin:0 auto;
    }
    </style>
</head>
<body onload="draw()">
    <canvas id="canvas"  width="800" height="600"></canvas>
    <script>
  function draw(){
            var canvas = document.getElementById('canvas')
            if(canvas.getContext){
            var ctx = canvas.getContext('2d')    //理解为画笔
        }
        }  
        </script>
</body>
</html>

（填充的矩形）fill和（描边的矩形）stroke

描边矩形定义：

 ctx.strokeStyle = 'rgba(0,0,0,0.4)'
 ctx.strokeRect(10,10,300,300)

填充矩形定义：

 ctx.fillStyle = 'red'    //颜色
 ctx.fillRect(20,20,300,300)      //拿起画笔，filRect矩形

删除： ctx.clearRect(45,45,60,60);

<!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>
    #canvas{
        box-shadow: 0 0  10px #333;
        margin:0 auto;
    }
    </style>
</head>
<body onload="draw()">
    <canvas id="canvas"  width="800" height="600"></canvas>
    <script>


        function draw(){
            var canvas = document.getElementById('canvas')
            if(canvas.getContext){

            var ctx = canvas.getContext('2d')    //理解为画笔
            ctx.fillStyle = 'rgba(0,0,0,0.4)'    //颜色
            ctx.fillRect(10,10,300,300)      //拿起画笔，filRect矩形

            ctx.fillStyle = 'red'    //颜色
            ctx.fillRect(20,20,300,300)      //拿起画笔，filRect矩形

           
        }
        }
       
        </script>
</body>
</html>

绘制三角形：

<!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>
    #canvas{
        box-shadow: 0 0  10px #333;
        margin:0 auto;
    }
    </style>
</head>
<body onload="draw()">
    <canvas id="canvas"  width="800" height="600"></canvas>
    <script>


        function draw(){
            var canvas = document.getElementById('canvas')
            if(canvas.getContext){
                var ctx = canvas.getContext('2d')    //理解为画笔
           //绘制三角形：
           ctx.beginPath()
           ctx.moveTo(75,50)
           ctx.lineTo(100,75)
           ctx.lineTo(100,25)
           ctx.closePath()
           ctx.stroke()
           
        }
        }
       
        </script>
</body>
</html>

双三角形：

<!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>
    #canvas{
        box-shadow: 0 0  10px #333;
        margin:0 auto;
    }
    </style>
</head>
<body onload="draw()">
    <canvas id="canvas"  width="800" height="600"></canvas>
    <script>


        function draw(){
            var canvas = document.getElementById('canvas')
            if(canvas.getContext){
                var ctx = canvas.getContext('2d')    //理解为画笔
           //绘制填充三角形：
           ctx.beginPath()
           ctx.moveTo(25,25)
           ctx.lineTo(105,25)
           ctx.lineTo(25,105)
           ctx.fill()
          

           ctx.beginPath()
           ctx.moveTo(125,125)
           ctx.lineTo(125,45)
           ctx.lineTo(45,125)
           ctx.closePath()
           ctx.stroke()
           
        }
        }
       
        </script>
</body>
</html>

画圆：

<!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>
    #canvas{
        box-shadow: 0 0  10px #333;
        margin:0 auto;
    }
    </style>
</head>
<body onload="draw()">
    <canvas id="canvas"  width="800" height="600"></canvas>
    <script>


        function draw(){
            var canvas = document.getElementById('canvas')
            if(canvas.getContext){
                var ctx = canvas.getContext('2d')    //理解为画笔
                ctx.strokeStyle = 'orange'
                ctx.LineWidth = 20
                //画圆
              //  ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)
                
              //  ctx.arc(400,300,150,0,Math.PI * 2)
               // ctx.arc(400,300,150,0,Math.PI * 1.5)
               ctx.arc(400,300,150,0,Math.PI / 2 * 1.5)
                ctx.stroke()
        }
        }
       
        </script>
</body>
</html>

笑脸：

image.png

<!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>
    #canvas{
        box-shadow: 0 0  10px #333;
        margin:0 auto;
    }
    </style>
</head>
<body onload="draw()">
    <canvas id="canvas"  width="800" height="600"></canvas>
    <script>


        function draw(){
            var canvas = document.getElementById('canvas')
            if(canvas.getContext){
                var ctx = canvas.getContext('2d')    //理解为画笔
                ctx.beginPath()
                ctx.arc(75,75,50,0,Math.PI*2,true)
                ctx.moveTo(110,75)
                ctx.arc(75,75,35,0,Math.PI,false)
                ctx.moveTo(65,65)
                ctx.arc(60,65,5,0,Math.PI*2,true)
                ctx.moveTo(95,65)
                ctx.arc(90,65,5,0,Math.PI*2,true)
                ctx.stroke()

        }
        }
       
        </script>
</body>
</html>

渐变：

image.png

<!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>
    #canvas{
        box-shadow: 0 0  10px #333;
        margin:0 auto;
    }
    </style>
</head>
<body onload="draw()">
    <canvas id="canvas"  width="800" height="600"></canvas>
    <script>


        function draw(){
            var canvas = document.getElementById('canvas')
            if(canvas.getContext){
                var ctx = canvas.getContext('2d')    //理解为画笔
                var lingrad = ctx.createLinearGradient(0,0,0,150)
                lingrad.addColorStop(0,'#cc6677')
                lingrad.addColorStop(0.5,'#fff')
                lingrad.addColorStop(0.5,'#c6c776')
                ctx.fillStyle = lingrad;
                ctx.fillRect(10,10,130,130)
        }
        }
       
        </script>
</body>
</html>

渲染图片：

<!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>
    #canvas{
        box-shadow: 0 0  10px #333;
        margin:0 auto;
    }
    </style>
</head>
<body onload="draw()">
    <canvas id="canvas"  width="800" height="600"></canvas>
    <script>


        function draw(){
            var canvas = document.getElementById('canvas')
            if(canvas.getContext){
                var ctx = canvas.getContext('2d')    //理解为画笔
                 var img  = new Image();
                 img.src = 'https://img.yzcdn.cn/vant/apple-1.jpg';
                //绘制图像确保图像加载完成：
                 img.onload = function(){
                    var ptrn = ctx.createPattern(img,'repeat')
                    ctx.fillStyle = ptrn ;
                    ctx.fillRect(0,0,800,600)
                 }
              
        }  
        }
       
        </script>
</body>
</html>

把图片裁剪：

image.png

<!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>
    #canvas{
        box-shadow: 0 0  10px #333;
        margin:0 auto;
    }
    </style>
</head>
<body onload="draw()">
    <canvas id="canvas"  width="800" height="600"></canvas>
    <script>


        function draw(){
            var canvas = document.getElementById('canvas')
            if(canvas.getContext){
                var ctx = canvas.getContext('2d')    //理解为画笔
                 var img  = new Image();
                 img.src = 'https://img.yzcdn.cn/vant/apple-1.jpg';
                //绘制图像确保图像加载完成：
                 img.onload = function(){
                   ctx.beginPath()
                   ctx.arc(400,300,150,0,Math.PI*2)
                   ctx.fill()
                   ctx.clip()
                   ctx.drawImage(this,70,110)
                 }
              
        }  
        }
       
        </script>
</body>
</html>

canvas的简单使用

建立一个简单的模板

（填充的矩形）fill和（描边的矩形）stroke

绘制三角形：

双三角形：

画圆：

笑脸：

渐变：

渲染图片：

把图片裁剪：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读