canvas 绘制基本图形

作者: 雅玲哑铃 | 来源:发表于2017-12-26 22:16 被阅读12次

安卓自定义View进阶-Canvas之画布操作
canvas(二)绘制图形
Android关于Path你所知道的和不知道的一切
HTML5Canvas
07 自定义View绘制
HTML之canvas
图形的位置测量和xfermode的使用-自定义view(一)
2019-03-21
canvas 绘制基本图形
canvas基本图形绘制

样例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas width="500px" height="500px" id="mycanvas">
            对不起，您的浏览器版本过低，点击<a href="#">下载</a>
        </canvas>
    </body>
    <script type="text/javascript">
        //获取canvas节点
        var canvas = document.getElementById("mycanvas");
        //获取canvas画布的上下文
        var context = canvas.getContext("2d");
    </script>
</html>

绘制清单

图片.png

一、画线

图片.png

通过学习了绘制直线，我们可以来实现一个简单的画板了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="400" height="400">你的浏览器不支持canvas</canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context  =canvas.getContext("2d");
        //鼠标按下并且鼠标移动才能画线
        canvas.onmousedown = function(e){
            var ev = e || window.event;
            //获取鼠标按下时坐标
            var x = ev.clientX-canvas.offsetLeft;
            var y = ev.clientY-canvas.offsetTop;
            context.beginPath();
            context.moveTo(x,y);
            canvas.onmousemove = function(e){
                var ev = e || window.event;
                //获取鼠标移动时的坐标
                var xx = ev.clientX-canvas.offsetLeft;
                var yy = ev.clientY-canvas.offsetTop;
                context.lineTo(xx,yy);
                context.stroke();
            }
        }
        document.onmouseup = function(){
            canvas.onmousemove = "";
        }
    </script>
</html>

图片.png

二、绘制矩形

方法一：绘制一个填充的矩形

<script type="text/javascript">
        var colorArr = ["red","blue","yellow","whitesmoke"];
        var canvas = document.getElementById("mycanvas");
        var context  =canvas.getContext("2d");
        context.beginPath();
        context.fillStyle = "palevioletred";
        context.fillRect(100,100,200,100);   
        context.fill();
</script>

图片.png

方法二：绘制一个矩形的边框,不能填充颜色

context.beginPath();
        context.strokeRect(100,100,200,100);   
        context.stroke();

图片.png

方法三：绘制一个矩形边框，可以填充颜色

context.beginPath();
        context.fillStyle = "palevioletred";
        context.rect(100,100,200,100);
        context.fill();
        context.stroke();

图片.png

通过学习了矩形，我们可以来实现一个国际象棋的棋盘了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="800" height="800"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        //方法一
//      var colors = ["white","black"];
//      for(var i=0;i<8;i++){
//          for(var j=0;j<8;j++){
//              context.beginPath();
//              if( i % 2 == 0 && j % 2 != 0 || i % 2 != 0 && j % 2 == 0 ){
//                  context.fillStyle = colors[0];
//              }else{
//                  context.fillStyle = colors[1];
//              }
//              context.fillRect(i*100,j*100,100,100);
//          }
//      }
        //方法二
        for(var i=0;i<800;i+=200){
            for(var j=0;j<800;j+=200){
                context.beginPath();
                context.fillRect(i,j,100,100);
                context.fillRect(i+100,j+100,100,100);
            }
        }
    </script>
</html>

这里有两个方法，第一种是分别设置白色和黑色的矩形
第二种是只设置黑色的矩形

图片.png

三、绘制圆形

前两个参数是圆心的坐标，第三个参数是半径，第四五个参数是圆开始画的角度和结束的角度（PI表示）最后一个参数是布尔：true：逆时针，false:(默认)顺时针

图片.png

学习了圆的绘制，我们可以绘制一个太极八卦图了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>太极八卦图</title>
        <style type="text/css">
            canvas{
                border:1px solid cornflowerblue;
                background-color: #ADD8E6;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="500" height="500">您的浏览器不支持canvas</canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context  =canvas.getContext("2d");
        
        context.beginPath();
        context.arc(250,250,100,0,Math.PI);
        context.fillStyle = "#000000";
        context.fill();
        
        context.beginPath();
        context.arc(250,250,100,0,Math.PI,true);
        context.fillStyle = "white";
        context.fill();
        
        context.beginPath();
        context.arc(300,250,50,0,Math.PI,true);
        context.fillStyle = "#000000";
        context.fill();
        
        context.beginPath();
        context.arc(200,250,50,0,Math.PI);
        context.fillStyle = "white";
        context.fill();
        
        context.beginPath();
        context.arc(300,250,10,0,Math.PI*2);
        context.fillStyle = "white";
        context.fill();
        
        context.beginPath();
        context.arc(200,250,10,0,Math.PI*2);
        context.fillStyle = "#000000";
        context.fill();
    </script>
</html>

图片.png

四、绘制文字

            context.beginPath();
            context.textBaseline = "middle"; //文字垂直对齐方法
            context.textAlign = "center"; //文字水平对齐方法
            context.font = "bold 20px Arial";  //(加粗 大小）字体样式
            context.fillStyle = "red";
            context.fillText("你好",100,100); //文字内容，每个横坐标定长，纵坐标随机

我们可以利用这种设置文字的样式，绘制一个验证码的图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="100" height="30">你的浏览器不支持canvas</canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        //随机(大小，位置随机但不重叠)字符（透明度），随机背景颜色（浅色200——250）
        //干扰项：3个左右的随机（半径随机，位置随机:有部分在画布上）干扰圆
                //3个左右的随机（长度随机，位置随机）干扰线
        var strStore = "abcdefghijklmnopqrstuvwxyzABCDEFJHIJKLMNOPQRSTUVQXYZ0123456789";
        //随机函数
        function randNum(min,max){
            return parseInt(Math.random()*(max-min))+min;
        }
        //随机颜色
        var colors = `rgb(${randNum(200,255)},${randNum(200,255)},${randNum(200,255)})`
        context.beginPath();
        context.fillStyle = colors;
        context.fillRect(0,0,canvas.width,canvas.height);
        context.globalAlpha = 0.7;
        context.fill();
        for(var i=0;i<5;i++){
            var str = strStore[randNum(0,strStore.length)];
            context.beginPath();
            context.textBaseline = "middle"; //文字垂直对齐方法
            context.textAlign = "center"; //文字水平对齐方法
            context.font = "bold "+randNum(20,30)+"px Arial";  //(加粗 大小）字体样式
            context.fillStyle = `rgb(${randNum(0,200)},${randNum(0,200)},${randNum(0,200)})`;
            context.fillText(str,10+i*20,randNum(10,20)); //文字内容，每个横坐标定长，纵坐标随机
            
        }
        //干扰项:
        for(var i=0;i<3;i++){
            //干扰圆
            context.beginPath();
            context.arc(randNum(0,100),randNum(0,30),randNum(3,20),0,Math.PI*2);
            context.strokeStyle = `rgb(${randNum(0,200)},${randNum(0,200)},${randNum(0,200)})`;
            context.stroke();
            //干扰线
            context.beginPath();
            context.moveTo(randNum(0,100),randNum(0,30));
            context.lineTo(randNum(0,100),randNum(0,30));
            context.strokeStyle = `rgb(${randNum(0,200)},${randNum(0,200)},${randNum(0,200)})`;
            context.stroke();
        }
    </script>
</html>

图片.png