• HTML5福利篇--使用Canvas画图

    目录

    一.Canvas元素

    1.Canvas元素定义

    2.使用JavaScript获取页面中的Canvas对象

    二.绘制图形

    1.绘制直线

    2.绘制矩形

    （1）rect()

    （2）strokeRect()

    （3）fillRect()和clearRect()函数

    3.绘制圆弧

    4.描边和填充

    5.渐变颜色

      6.透明颜色

    三.绘制图像和文字

    1.绘制图像

    2.组合图       

    3.输出文字

    4.图形操作

    一.Canvas元素

            Canvas是画布的意思，这个是HTML5中新出现的元素，可以在页面中定义一个画布，实现绘图功能

    1.Canvas元素定义

    语法：

    "xxx" height= width= >当浏览器不支持Canvas时，显示这里的文字

    id                画布元素的标识

    height        画布高

    width        画布宽

    例如定义一个画布：

    <canvas id="canvas" width="600" height="960">浏览器不支持canvas>
    2.使用JavaScript获取页面中的Canvas对象

            在JavaScript中可以用document.getElementById()方法获取网页中的对象，获得对象后，通过getContext()函数获得对象的2d上下文对象，就可以在画布上进行绘画了

    语法：

    docment.getElementById(ObjectId)

    例：

    1. <body>
    2. <canvas id="canvas" width="600" height="960">浏览器不支持canvas>
    3. <script>
    4.     var c=document.getElementById("canvas"); //获得画布对象
    5.     var d=c.getContext("2d");  //获得2d上下文对象
    6. script>
    7. body>
    二.绘制图形
    1.绘制直线

            beginPath()                开始绘图函数

            moveTo()                该函数将坐标移动到指定坐标，函数参数为x，y

            lineTo()             绘制直线

            stroke()                绘制图形的边界轮廓

    例如绘制三角形：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.    <style>
    7.  
    8.    style>
    9. head>
    10. <body>
    11. <canvas id="canvas" width="600" height="960">浏览器不支持canvas>
    12. <script>
    13.     function f() {
    14.         var c=document.getElementById("canvas"); //获得画布对象
    15.         var d=c.getContext("2d");  //获得2d上下文对象
    16.         d.beginPath();   //开始绘图
    17.         d.moveTo(100,0)     //将直线移动到绘图起点坐标
    18.         d.lineTo(50,100);
    19.         d.lineTo(150,100);
    20.         d.lineTo(100,0);
    21.         d.closePath();      //闭合路径，如果线的起点和终点连接，可以忽略这个方法
    22.         d.stroke();         //绘制轮廓
    23.     }
    24.    window.addEventListener("load",f,false);
    25. script>
    26. body>
    27. html>

    效果：

    又例如绘制复杂图案：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.  
    8.     style>
    9. head>
    10. <body>
    11. <canvas id="canvas" width="600" height="960">浏览器不支持canvas>
    12. <script>
    13.     function f() {
    14.         var c=document.getElementById("canvas"); //获得画布对象
    15.         var d=c.getContext("2d");  //获得2d上下文对象
    16.         var dx=150;
    17.         var dy=150;
    18.         var s=100;
    19.         d.beginPath();   //开始绘图
    20.         var x=Math.sin(0);
    21.         var y=Math.cos(0);
    22.         var dig=Math.PI/15*11;
    23.         for(var i=0;i<30;i++){
    24.             var x=Math.sin(i*dig);
    25.             var y=Math.cos(i*dig);
    26.             d.lineTo(dx+x*s,dy+y*s);
    27.         }
    28.         d.closePath();      //闭合路径，如果线的起点和终点连接，可以忽略这个方法
    29.         d.stroke();         //绘制轮廓
    30.     }
    31.     window.addEventListener("load",f,true);
    32. script>
    33. body>
    34. html>

    效果:

    2.绘制矩形

            可以通过rect()函数和strokeRect()函数绘制矩形，调用fillRect()填充指定矩形的区域，调用clearRect()可以擦除指定区域的矩形

    （1）rect()

            该函数用来绘制矩形，语法：

    Rect(x,y,width,height)

    x,y        表示矩形的起点

    width，height        表示矩形的长和宽

    （2）strokeRect()

            该函数和rect()函数差不多，都是绘制矩形，但该函数绘图时不需要像rect()一样调用beginPath()和closePath(),语法：

    storkeRect(x,y,width,height)
    （3）fillRect()和clearRect()函数

            fillRect()绘制有填充的矩形，语法：

    fillRect(x,y,width,height)

            clearRect()清除矩形，语法：

    clearRect(x,y,width,height)

    例如：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.  
    8.     style>
    9. head>
    10. <body>
    11. <canvas id="canvas" width="600" height="960">浏览器不支持canvas>
    12. <script>
    13.     function f() {
    14.         var c=document.getElementById("canvas"); //获得画布对象
    15.         var d=c.getContext("2d");  //获得2d上下文对象
    16.  
    17.         d.strokeRect(360,100,150,100)  //不需要调用beginPath和closePath
    18.  
    19.         d.beginPath();   //开始绘图
    20.         d.rect(200,100,150,150);
    21.         d.fillRect(200,260,150,150);  //代填充的矩形
    22.         d.closePath();      //闭合路径，如果线的起点和终点连接，可以忽略这个方法
    23.         d.stroke();         //绘制轮廓
    24.     }
    25.     window.addEventListener("load",f,true);
    26. script>
    27. body>
    28. html>

    效果： 

    3.绘制圆弧

            绘制圆弧函数arc()，语法：

    arc(centerX,centerY,radius,startingAngle,endingAngle,antiClockwise);

    参数：

    centerX                圆弧圆心的X坐标

    centerY                圆弧圆心的Y坐标

    radius                圆弧的半径

    startingAngle        圆弧的起始角度

    endingAngela        圆弧的结束角度

    antiClockwise        是否按逆时针绘图  

    例如：

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Titletitle>
    6.   <style>
    7.  
    8.   style>
    9. head>
    10. <body>
    11. <canvas id="canvas" width="600" height="960">浏览器不支持canvas>
    12. <script>
    13.   function f() {
    14.     var c=document.getElementById("canvas"); //获得画布对象
    15.     var d=c.getContext("2d");  //获得2d上下文对象
    16.     d.beginPath();   //开始绘图
    17.     d.arc(150,150,100,1/3*Math.PI,2/3*Math.PI,true);
    18.     // d.arc(150,450,100,0,2*Math.PI,true);
    19.     d.closePath();      //闭合路径，如果线的起点和终点连接，可以忽略这个方法
    20.     d.stroke();         //绘制轮廓
    21.   }
    22.   window.addEventListener("load",f,true);
    23. script>
    24. body>

    效果：

    4.描边和填充

            Canvas的2d上下文对象的strokeStyle属性可以设置描边的颜色，lineWidth属性可以指定描边的宽度，fillStyle属性可以设置填充的颜色

    例如绘制一个红边的圆和黄色的矩形：

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Titletitle>
    6.   <style>
    7.  
    8.   style>
    9. head>
    10. <body>
    11. <canvas id="canvas" width="600" height="960">浏览器不支持canvas>
    12. <script>
    13.   function f() {
    14.     var c=document.getElementById("canvas"); //获得画布对象
    15.     var d=c.getContext("2d");  //获得2d上下文对象
    16.    d.lineWidth=10;
    17.    d.strokeStyle="red";
    18.    d.fillStyle="yellow";
    19.     d.arc(300,100,60,0,2*Math.PI,false)
    20.    d.fillRect(250,200,100,100);
    21.     d.closePath();      //闭合路径，如果线的起点和终点连接，可以忽略这个方法
    22.     d.stroke();         //绘制轮廓
    23.   }
    24.   window.addEventListener("load",f,true);
    25. script>
    26. body>

    效果：

    5.渐变颜色

            CanvasGradient用于定义画布中一个渐变颜色的对象，使用渐变颜色前要创建对象，渐变颜色对象可以通过两种方式创建：

    （1）以线性颜色渐变方式创建CanvasGradient对象，函数createLinearGradient()语法：

    createLinearGradient(xStrat,yStrat,xEnd,yEnd)

    其中的参数分别是线性开始的坐标和结束的坐标

    （2）以放射颜色渐变方式创建CanvasGradient对象，函数createRadiaGradient()语法：

    createRadiaGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

    参数：

    xStart，yStart                开始圆的圆心坐标

    radiusStart                开始圆的半径

    xEnd，yEnd                结束圆的圆心坐标

    radiusEnd                结束圆的半径

    （3）为渐变对象设置颜色

            创建渐变颜色对象后，可以通过CanvasGradient属性的addColorStop()方法在渐变的某个点添加一个颜色变化，语法：

    addColorStop(offset,color)

    offset                一个范围在0到1之间的浮点值，表示渐变的开始和结束的一部分

    color                表示offset到颜色

    （4）设置描边样式为渐变颜色

            只要将前面创建的CanvasGradient对象赋值给Canvas的上下文2d对象就可以使用渐变颜色进行描边了

    例如：

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Titletitle>
    6. head>
    7. <body>
    8. <canvas id="canvas" width="600" height="960">浏览器不支持canvas>
    9. <script>
    10.   function f() {
    11.     var c=document.getElementById("canvas"); //获得画布对象
    12.     var d=c.getContext("2d");  //获得2d上下文对象
    13.     var e=d.createRadialGradient(100,100,0,100,100,100);
    14.     e.addColorStop(0,"red");
    15.     e.addColorStop(0.5,"green");
    16.     e.addColorStop(1,"yellow");
    17.     var centerx=100;
    18.     var centery=100;
    19.     var radius=100;
    20.     var startingAngle=0;
    21.     var endingAngle=2*Math.PI;
    22.     d.beginPath();
    23.     d.arc(centerx,centery,radius,startingAngle,endingAngle,false);
    24.     d.fillStyle=e;
    25.     d.stroke(); //绘制轮廓
    26.     d.fill();
    27.   }
    28.   window.addEventListener("load",f,true);
    29. script>
    30. body>

    效果：

      6.透明颜色

            在指定颜色时可以使用rgba()方法定义颜色透明度，语法：

    rgba(r,g,b,alpha)

    参数： r表示红色集合，b表示绿色集合，b表示蓝色集合，它们都是十进制数，范围在0~255

    alpha表示透明度，取值范围0~1

    例如：

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Titletitle>
    6. head>
    7. <body>
    8. <canvas id="canvas" width="600" height="960">浏览器不支持canvas>
    9. <script>
    10.   function f() {
    11.     var canvas=document.getElementById("canvas"); //获得画布对象
    12.     if(canvas == null) return false;
    13.     var context=canvas.getContext("2d");
    14.     // 绘制底图
    15.     context.fillStyle="yellow";
    16.     context.fillRect(0,0,400,350);
    17.     // 循环绘制10个圆
    18.     var n=0;
    19.     for(var i=0;i<10;i++){
    20.       context.beginPath();
    21.       context.arc(i*25,i*25,i*10,0,2*Math.PI,true);
    22.       context.fillStyle="rgba(255,0,0,0.5)";
    23.       context.fill();  //填充图形
    24.     }
    25.   }
    26.   window.addEventListener("load",f,true);
    27. script>
    28. body>

    效果：

    三.绘制图像和文字
    1.绘制图像

            Canvas画布绘制图像的方法是drawImage()，语法：

    1. drawImage(image,x,y)
    2. drawImage(image,x,y,width,height)
    3. drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)

    image                要绘制的图像

    x,y                要绘制图像的左上角

    width，height                绘制图像的宽和高

    sourceX，sourceY                图像将要被绘制的区域的左上角

    sourceWidth,sourceHeight                被绘制的原图像区域

    destX，destY                要绘制图像区域的左上角的画布坐标

    destWidth，destHeight                图像区域在画布上要绘制的大小

    例如：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.  
    8.     style>
    9. head>
    10. <body>
    11. <canvas id="canvas" width="2000" height="1000">浏览器不支持canvas>
    12. <script>
    13.     function f() {
    14.         var c=document.getElementById("canvas"); //获得画布对象
    15.         var ctx=c.getContext("2d");  //获得2d上下文对象
    16.         var ImageObj=new Image();
    17.         ImageObj.src="mn1.png";
    18.         ImageObj.onload=function () {
    19.             ctx.drawImage(ImageObj,0,0)  //原图大小
    20.             ctx.drawImage(ImageObj,980,0,480,300) //原图一半显示
    21.             //  从原图(500，0)处截取一个300x300的图像大小，在(980,350)处显示，显示大小为300x300
    22.             ctx.drawImage(ImageObj,500,0,300,300,980,350,300,300);
    23.         };
    24.     }
    25.     window.addEventListener("load",f,true);
    26. script>
    27. body>
    28. html>

    效果：

    2.组合图       

             如果画布上已经有图形了，再放一个时，我们就要考虑图片的组合问题，Canvas的2d上下文对象的gloalCompositeOperation属性可以来设置组合方式，该属性参数如下：

    globalCompositeOperation属性参数
    参数描述
    source-over默认值，新图会覆盖在原图上
    destination-over在原有内容之下显示图像
    source-in新图仅仅出现与原内容重复的部分，其他区域变透明
    destination-in

    原有内容和新图不重复的部分会被保留

    source-atop新图像中与原内容重复的部分会被绘制，并覆盖原有内容上
    destination-atop原有内容和新图像重复部分会被保留，并会在原有内容之下绘制图形
    source-in只有新图和原内容不重复的部分会被绘制出来
    destination-in原有内容和新图不重复部分会被保留
    lighter两图像中重复的部分作加色处理
    darker两图像中重复的部分作减色处理
    xor重复部分会变透明
    copy只有新图像会被保留，其他都被清除

    例如：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <canvas id="canvas" width="2000" height="1000">浏览器不支持canvas>
    9. <script>
    10.   function draw(){
    11.       var c=document.getElementById("canvas");
    12.       var ctx=c.getContext("2d");
    13.       ctx.fillStyle="blue";
    14.       ctx.fillRect(0,0,100,100);
    15.       ctx.fillStyle="red";
    16.       ctx.globalCompositeOperation="source-over";
    17.       var centerX=100;
    18.       var centerY=100;
    19.       var radius=50;
    20.       var startingAngle=0;
    21.       var endingAngle=2*Math.PI;
    22.       ctx.beginPath();
    23.       ctx.arc(centerX,centerY,radius,startingAngle,endingAngle,false);
    24.       ctx.fill();
    25.   }
    26.   window.addEventListener("load",draw,true);
    27. script>
    28. body>
    29. html>

    效果：

     source-over

    destination-over

    source-in

    destination-in

    source-out

    destination-out

    source-atop

     source-atop

    lighter

    xor

    copy

    3.输出文字

    （1）输出

            使用strokeText()方法可以在画布的指定文字输出文字，语法：

    stroketText(string text,float x,float y)

    参数：        text        文字                x，y        文字输出位置

    例如：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <canvas id="canvas" width="2000" height="1000">浏览器不支持canvas>
    9. <script>
    10.   function draw(){
    11.       var c=document.getElementById("canvas");
    12.       var ctx=c.getContext("2d");
    13.       ctx.strokeText("hello world-----hello time",200,200);
    14.   }
    15.   window.addEventListener("load",draw,true);
    16. script>
    17. body>
    18. html>

    效果：

    （2）设置字体

            通过Context.font属性设置字符串字体，格式：

    Context.font=“字体大小 字体名称”

    例：

    1.   var c=document.getElementById("canvas");
    2.       var ctx=c.getContext("2d");
    3.       ctx.font="10pt 黑体";
    4.       ctx.strokeText("你好世界！你好时光！",200,200);

    （3）设置边框宽度和颜色

            stokeStyle设置文字的颜色

    （4）填充文字内部

            使用strokeText方法输出的文字是中空的，只绘制了边框，如果要填充文字内部，可以使用fillText() 方法，语法：

    fillText(string text,float x,float y)

            也可以使用fillstyle属性来设置填充颜色

    ctx.fiilStyle="blue";

    例如渐变填充颜色：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <canvas id="canvas" width="2000" height="1000">浏览器不支持canvas>
    9. <script>
    10.   function draw(){
    11.       var c=document.getElementById("canvas");
    12.       var ctx=c.getContext("2d");
    13.       var Colordiagonal=ctx.createLinearGradient(100,100,900,100);
    14.       Colordiagonal.addColorStop(0,"yellow");
    15.       Colordiagonal.addColorStop(0.5,"green");
    16.       Colordiagonal.addColorStop(1,"red");
    17.       ctx.fillStyle=Colordiagonal;
    18.       ctx.font="60pt 隶书";
    19.       ctx.fillText("你好世界！你好时光！",100,100);
    20.   }
    21.   window.addEventListener("load",draw,true);
    22. script>
    23. body>
    24. html>

    效果：

    4.图形操作

            （1）保持和恢复绘图状态

    调用Context.save()方法可以保持当前的绘图状态，绘图状态是以堆的方式保存，调用Context.restoe()方法弹出之前保存的绘制状态，这两个方法没有参数

    例如：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <canvas id="canvas" width="2000" height="1000">浏览器不支持canvas>
    9. <script>
    10.   function draw(){
    11.       var c=document.getElementById("canvas");
    12.       var ctx=c.getContext("2d");
    13.         ctx.fillStyle='red';
    14.         ctx.fillRect(0,0,150,150);  //红色矩形
    15.         ctx.save();   //保存绘图状态
    16.        ctx.fillStyle="blue";
    17.        ctx.fillRect(0,200,150,150);  //蓝色的矩形
    18.       ctx.restore();   //恢复之前保存的绘图状态，即红色
    19.       ctx.fillRect(200,200,150,150)
    20.   }
    21.   window.addEventListener("load",draw,true);
    22. script>
    23. body>
    24. html>

    效果：

    （2）图形变换

            a.平移translate(x,y)

                    参数x和y表示从原点分别平移的位移

            b.缩放scale(x,y)

                    参数x和y表示坐标轴缩放比例

            c.旋转rotate(angle)

                    参数angle是坐标轴旋转的角度

            d.变形setTransform()        

                    语法:

    setTransform(m1,m2,m3,m4,dx,dy)

    表示点(x,y)变换到点(X,Y)，变换过程：

    X=m1*x+m3*y+dx，Y=m2*x+m4*y+dy

    例如：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <canvas id="canvas" width="2000" height="1000">浏览器不支持canvas>
    9. <script>
    10.   function draw(){
    11.       var c=document.getElementById("canvas");
    12.       var context=c.getContext("2d");
    13.       context.save();
    14.       context.fillStyle="#EEEEFF";
    15.       context.fillRect(0,0,400,300);
    16.       context.fillStyle="rgba(255,0,0,0.1)";
    17.       context.fillRect(0,0,100,100);
    18.       context.translate(100,100);
    19.       context.scale(0.5,0.5);
    20.       context.rotate(Math.PI/4);
    21.       context.fillRect(0,0,100,100);
    22.       context.restore();
    23.       context.beginPath();
    24.       context.arc(200,50,50,0,2*Math.PI,false);
    25.       context.stroke();
    26.       context.fill();
    27.   }
    28.   window.addEventListener("load",draw,true);
    29. script>
    30. body>
    31. html>

    效果：

  • 相关阅读:
    SAP ABAP BAPI_MATERIAL_BOM_GROUP_CREATE DEMO
    云主机适合哪些人使用？
    并查集总结
    【2023，学点儿新Java-49】变量与运算符 (阶段性复习2)：基本数据类型变量的使用，基本数据类型变量间的运算规则
    【前端】JavaScript —— JS的基本语法之数组, 函数....
    Failed to load the JNI shared library “D:\...\jvm.dll
    【BOOST C++ 15 泛型编程】（1）Boost.TypeTraits
    （面试题) 面试官：如何在forEach的循环里使用break
    日志分析系统——ELK
    ElementUI 表单 rules 规则
  • 原文地址：https://blog.csdn.net/weixin_63009369/article/details/133131866