美文网首页
5_H5中Canvas绘图

5_H5中Canvas绘图

作者: Zd_silent | 来源:发表于2016-12-05 16:04 被阅读52次

    HTML5的canvas元素是HTML5技术标准中最令人振奋的功能之一。

    它提供了一套强大的图形API,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。让开发者能够制作从文字处理到电子游戏的各类应用程序。

    绘制直线段流程:

    1. 在HTML5文档中添加canvas元素,并且设置的宽高和ID
    2. 在canvas元素中添加提示语句,让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境:此为固定语句
      1. 指定线宽:lineWidth= 数值
      2. 指定颜色:strokeStyle=颜色值(只适用用轮廓,线段等,填充色用: fillStyle=颜色值
    5. 设定起点:moveTo(x坐标,y坐标)
    6. 设定终点:lineTo(x坐标,y坐标)
    7. 开始绘制:stroke()

    Canvas的路径方法

    1. moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
    2. lineTo() 添加一个新点,(在我们的直线案例中就是定义直线的终点,但是后边继续绘制的话,它就变成中间点)
    3. stroke() 绘制已定义的路径
    4. fill()绘制一个实心的(带填充的图形)
    5. beginPath() 用来创建新的路径
    6. closePath() 从当前点回到起始点的来封闭路径
    7. arc(x,y,r,开始角度,结束角度,true/false) :创建圆弧/曲线(用于创建圆形或部分圆)
    <!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 type="text/css">
        canvas{background: rgb(99, 101, 107)}
      </style>
    </head>
    <body>
      <canvas id="myCanvas" width="500px" height="300px">
        您的浏览器不支持Html5的元素
      </canvas>
      <script type="text/javascript">
        var canvas=document.getElementById('myCanvas');// 定义变量获取画布Dom
        var context=canvas.getContext('2d');// 设置绘图环境为2d
        context.lineWidth=5;
        context.strokeStyle="rgb(52, 249, 182)"
        context.moveTo(0,0);
        context.lineTo(200,200);
        context.stroke();
      </script>
    </body>
    </html>
    
    line.png

    绘制矩形流程:

    1. 在HTML5文档中添加canvas元素,并且设置的宽高和ID
    2. 在canvas元素中添加提示语句,让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境:此为固定语句,
      • 绘制空心矩形
        1. 指定线宽:lineWidth= 数值
        2. 指定轮廓颜色:strokeStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
        3. 设定矩形的基本参数:strokeRect(x,y;width,height)
      • 绘制填充矩形
        1. 指定填充颜色:fillStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
        2. 设定矩形的基本参数:fillRect(x,y;width,height)

    矩形的绘制方法

    1. rect(x,y,w,h)创建一个矩形
    2. strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填充)
    3. fillRect(x,y,w,h) 绘制"被填充"的矩形
    4. stroke() 绘制已定义的路径
    5. fill()绘制一个实心的(带填充的图形)
    <!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 type="text/css">
        canvas{background: rgb(99, 101, 107)}
      </style>
    </head>
    <body>
      <canvas id="myCanvas" width="500px" height="300px">
        您的浏览器不支持Html5的元素
      </canvas>
      <script type="text/javascript">
        var canvas=document.getElementById('myCanvas');// 定义变量获取画布Dom
        var context=canvas.getContext('2d');// 设置绘图环境为2d
        context.lineWidth=5;
        context.strokeStyle="rgb(52, 249, 182)"
        context.moveTo(50,50);
        context.lineTo(100,50);
        context.lineTo(100,100);
        context.lineTo(50,100);
        // context.lineTo(50,50);
        context.closePath();
        context.stroke();
    
        context.beginPath();
        context.rect(150,50,50,50);
        context.fill();
        context.stroke();
    
        context.beginPath();
        context.strokeRect(250,50,50,50)
        context.stroke();
    
        context.beginPath();
        context.fillStyle="rgb(150, 18, 224)"
        context.fillRect(350,50,50,50)
        context.stroke();
      </script>
    </body>
    </html>
    
    rect.png

    绘制圆

    1. 在HTML5文档中添加canvas元素,并且设置的宽高和ID
    2. 在canvas元素中添加提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境
    5. 指定线宽:lineWidth= 数值
    6. 指定颜色:fill/strokeStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
    7. 设定圆的基本参数:
      • 圆心的坐标:x,y
      • 圆的半径:数值
      • 起始弧度和终止弧度:角度值1,角度值2
      • 绘制方向:true(逆时针)/false(顺时针)
    8. 开始绘制:stroke()/fill()

    文字的绘制方法

    1. strokeText("文字",x,y,maxWith) 绘制(描边)空心文字
    2. fillText("文字",x,y,maxWith) 绘制实心
    3. 字体样式:font="大小 字体 ..."

    渐变色绘制方法

    1. createLinearGradient() 创建线性渐变
      • createLinearGradient(x1,y1,x2,y2)---颜色渐变的起始坐标和终点坐标
      • addColorStop(位置,"颜色值")---0表示起点...插入点...1表示终点,配置颜色停止点
    2. createRadialGradient(x1,y1,r1,x2,y2,r2,) 创建放射状/环形的渐变
    <!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>
    </head>
    <body>
      <canvas id="myCanvas" width="800px" height="600" style="background:rgb(236, 52, 205)">
    
      </canvas>
      <script type="text/javascript">
        var canvas = document.getElementById('myCanvas');
        var con = canvas.getContext('2d');
        con.lineWidth = 5;
        con.strokeStyle = "rgb(69, 191, 45)";
        con.fillStyle = "rgb(130, 6, 156)";
    
    // 圆
        con.arc(100,50,30,0,Math.PI);
        con.stroke();
    
        con.beginPath();
        con.arc(100,150,30,0,Math.PI*2);
        con.fill()
    
        con.beginPath();
        con.arc(100,250,30,0,Math.PI*2);
        con.fill();
        con.stroke();
    
        con.beginPath()
        con.arc(200,50,30,0,Math.PI/3,true);
        con.stroke();
    
        con.beginPath()
        con.arc(200,150,30,0,Math.PI/3,true);
        con.fill();
    
        con.beginPath()
        con.lineWidth = 2;
        con.arc(200,250,30,0,Math.PI/3,true);
        con.fill()
        con.stroke()
    
        con.beginPath();
        con.arc(300,50,30,0,Math.PI/3,true);
        con.closePath();
        con.stroke();
    
        con.beginPath();
        con.arc(300,150,30,0,Math.PI/3,true);
        con.closePath();
        con.fill();
    
        con.beginPath();
        con.arc(300,250,30,0,Math.PI/3,true);
        con.closePath();
        con.fill();
        con.stroke();
    
    // 扇形
        con.fillStyle = "rgb(207, 59, 66)"
        con.beginPath();
        con.moveTo(450,100);
        con.arc(450,100,100,Math.PI*7/6,Math.PI*1.5,false);
        con.fill();
    
        con.beginPath();
        con.moveTo(450,100);
        con.arc(450,100,100,Math.PI*11/6,Math.PI*1.5,true);
        con.fill();
    
        con.fillStyle = "rgb(236, 52, 205)"
        con.strokeStyle = "rgb(236, 52, 205)"
        con.beginPath();
        con.moveTo(450,100);
        con.arc(450,100,70,Math.PI*7/6,Math.PI*1.5,false);
        con.fill();
        con.stroke();
    
        con.beginPath();
        con.moveTo(450,100);
        con.arc(450,100,70,Math.PI*11/6,Math.PI*1.5,true);
        con.fill();
        con.stroke();
    // 文字
        con.strokeStyle = "rgb(176, 162, 60)"
        con.beginPath();
        con.font = "40px 宋体"
        con.strokeText("文",400,100,50);
    
        con.fillStyle = "rgb(73, 230, 33)"
        con.beginPath();
        con.font = "40px 楷体"
        con.fillText("文",490,100,50);
    
    // 渐变色
        con.beginPath();
        g = con.createLinearGradient(400,120,450,120);
        g.addColorStop(0,"rgb(217, 240, 98)");
        g.addColorStop(0.5,"rgb(11, 16, 145)");
        g.addColorStop(1,"rgb(135, 10, 129)");
        con.fillStyle = g;
        con.fillRect(400,120,100,100);
    
    // 放射渐变
      con.beginPath();
      g1 = con.createRadialGradient(400,300,30,500,300,30);
      g1.addColorStop(0,"rgb(233, 104, 21)");
      g1.addColorStop(0.3,"rgb(57, 233, 21)");
      g1.addColorStop(0.6,"rgb(63, 21, 233)");
      g1.addColorStop(1,"rgb(21, 233, 131)");
      con.fillStyle = g1;
      con.fillRect(400,240,100,100);
    
      </script>
    </body>
    </html>
    
    canvas.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>
    </head>
    <body>
      <canvas id="myCanvas" width="600" height="300" style="background:rgb(38, 69, 153)">
    
      </canvas>
      <script>
        var canvas = document.getElementById('myCanvas');
        var con = canvas.getContext('2d');
        // 太极
        g = con.createLinearGradient(150,50,150,250);
        g.addColorStop(0,"rgb(255, 255, 255)");
        g.addColorStop(1,"rgb(0, 0, 0)")
        con.fillStyle = g;
        con.arc(150,150,100,Math.PI/2,-Math.PI/2);
        con.fill();
    
        g1 = con.createLinearGradient(150,50,150,250);
        g1.addColorStop(0,"rgb(0, 0, 0)");
        g1.addColorStop(1,"rgb(255, 255, 255)");
        con.fillStyle = g1;
    
        con.beginPath();
        con.arc(150,150,100,-Math.PI/2,Math.PI/2);
        con.fill();
    
        con.fillStyle = g;
        con.beginPath();
        con.arc(150,200,50,Math.PI/2,-Math.PI/2,true);
        con.fill();
    
        con.fillStyle = g1;
        con.beginPath();
        con.arc(150,100,50,-Math.PI/2,Math.PI/2,true);
        con.fill();
    
        g2 = con.createRadialGradient(150,100,1,150,100,10);
        g2.addColorStop(0,"rgb(0, 0, 0)");
        g2.addColorStop(1,"rgb(255, 255, 255)");
        con.fillStyle = g2;
    
        con.beginPath();
        con.arc(150,100,10,0,Math.PI*2);
        con.fill();
    
        g2 = con.createRadialGradient(150,200,1,150,200,10);
        g2.addColorStop(1,"rgb(0, 0, 0)");
        g2.addColorStop(0,"rgb(255, 255, 255)");
        con.fillStyle = g2;
    
        con.beginPath();
        con.arc(150,200,10,0,Math.PI*2);
        con.fill();
    
      </script>
    </body>
    </html>
    
    太极.png

    绘制阴影的方法

    1. shadowOffsetX 设置阴影的水平偏移距离
    2. shadowOffsetY 设置阴影垂直偏移距离
    3. shadowBlur 设置阴影的模糊系数
    4. shadowColor 设置阴影的颜色
    <!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>
    </head>
    <body>
      <canvas id="myCanvas" width="300" height="300" style="background:rgb(38, 69, 153)">
    
      </canvas>
      <script>
        var canvas = document.getElementById('myCanvas');
        var con = canvas.getContext('2d');
    
        con.shadowOffsetX = 10;
        con.shadowOffsetY = 10;
        con.shadowBlur = 5;
        con.shadowColor = "rgb(169, 7, 235)";
    
        con.font = "20px 楷体";
        con.fillText("啦啦啦,我是一个粉刷匠",0,100);
    
        con.beginPath();
        con.strokeRect(80,180,100,100);
    
      </script>
    </body>
    </html>
    
    shadow.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>
    </head>
    <body>
      <canvas id="myCanvas" width="300" height="300" style="background:rgb(38, 69, 153)">
    
      </canvas>
      <script>
        var canvas = document.getElementById('myCanvas');
        var con = canvas.getContext('2d');
    
        con.shadowOffsetX = 0;
        con.shadowOffsetY = 8;
        con.shadowBlur = 8;
        con.shadowColor = "Black";
    
        con.font = "20px 宋体";
        con.fillText("绘制饼图",50,30);
    
        con.beginPath();
        con.fillStyle = "rgb(244, 77, 38)";
        con.moveTo(150,150);
        con.arc(150,150,100,0,Math.PI/3);
        con.fill();
    
        con.beginPath();
        con.fillStyle = "Black";
        con.font = "15px 楷体";
        con.fillText("15%",190,180);
    
        con.beginPath();
        con.fillStyle = "rgb(38, 225, 244)";
        con.moveTo(150,150);
        con.arc(150,150,100,Math.PI/3,Math.PI);
        con.fill();
    
        con.beginPath();
        con.fillStyle = "Black";
        con.font = "15px 楷体";
        con.fillText("35%",100,200);
    
        con.beginPath();
        con.fillStyle = "rgb(38, 244, 127)";
        con.moveTo(150,150);
        con.arc(150,150,100,Math.PI,Math.PI*2);
        con.fill();
    
        con.beginPath();
        con.fillStyle = "Black";
        con.font = "15px 楷体";
        con.fillText("50%",140,100);
    
      </script>
    </body>
    </html>
    
    饼.png

    相关文章

      网友评论

          本文标题:5_H5中Canvas绘图

          本文链接:https://www.haomeiwen.com/subject/vrzkmttx.html