首页 > 代码库 > HTML-Canvas01

HTML-Canvas01

2024-08-09 03:23:53   220人阅读

画直线:

var c = document.getElementById("myCanvas"); //不要忘写documentvar ctx = c.getContext("2d");ctx.lineWidth = 10; ctx.strokeStyle = "red"; // 注意不是strokeColor;//创建一个路径ctx.beginPath();ctx.moveTo(10,10);ctx.lineTo(50,50);ctx.stroke();

添加线帽：ctx.lineCap = “butt”(默认) ；”round”（半圆形）； ”square”（正方形）;　　

//额外补充，加深 begbinPath 与stroke 的区域理解ctx.beginPath();ctx.moveTo(100,100);ctx.lineTo(200,100);ctx.strokeStyle = "red";ctx.stroke(); //(1)ctx.beginPath(); //(2)ctx.moveTo(100,200);ctx.lineTo(200,200);ctx.strokeStyle = "blue";ctx.stroke(); （3)//代码绘制一蓝一红两条线；省略 (1)或(3) 都只能绘制其中一条；省略 (2)会得到一紫一蓝；省略 (1)和(2) 会得到两条蓝色

画矩形:

ctx.lineWidth = 10;ctx.strokeStyle = "yellow"; //实心矩形：ctx.fillStyle = “yellow”;ctx.beginPath();//用 strokeRect 函数来绘制一个空心矩形；四个参数分别为起点坐标（左上角）X、 Y，矩形长宽。ctx.strokeRect(10,10,100,100); //实心矩形：ctx.fillRect(10.10.100.100);/*strokeRect 函数替代方法。 //实心矩形：* ctx.rect(10,10,100,100); //ctx.rect(10,10,100,100);* ctx.stroke(); //ctx.fill();*/

画圆弧:

ctx.beginPath();//用 arc 函数绘制圆弧，六个参数分别为圆心坐标 X、Y ，半径，起始角度（a），终止角度（ b），是否逆时针（圆弧方向 c）ctx.arc(100,100,70,0,1/2*Math.PI,true);//可通过 fill 函数绘制实心圆弧ctx.stroke();

技术分享//起始角度与终止角度都是根据圆心向右水平线确定的，它们分别确定圆弧开始点与结束点；再确定圆弧方向绘制。

 

fill 画圆弧的变化情况:

　技术分享技术分享技术分享技术分享

画圆角矩形:

ctx.beginPath();ctx.moveTo(20,20);ctx.lineTo(70,20);//用 arcTo 函数来绘制圆弧，五个参数分别是 p1 坐标，p2 坐标，圆弧半径。ctx.arcTo(120,30,120,70,50);ctx.lineTo(120,120);ctx.stroke();

技术分享P1 点X 坐标与P2 点 X 坐标相同；P1 点Y 坐标相比 P2 点 Y 坐标更接近起始点 Y 坐标

檫除 canvas 画板:

//用 clearRect 函数擦除一个矩形区域，四个参数分别是起点 X、Y 坐标，矩形长宽。ctx.clearRect(30,30,50,50);//无需在 ctx.beginPath()中；无需使用 ctx.stroke()//擦除画板，对设置之前绘制的图形有效，对之后的无效。

画曲线:

  • 二次贝尔塞尔曲线:
    ctx.beginPath();ctx.moveTo(100,100);//用 quadraticCurveTo 函数，四个参数分别是控制点（ a）X 、Y 坐标，终点（ b）X、 Y 坐标。ctx.quadraticCurveTo(20,50,200,20)ctx.stroke();

    技术分享

  • 三次贝尔塞尔曲线:
    ctx.beginPath();ctx.moveTo(68,130);//用 berzierCurveTo 函数，六个参数分别是控制点（ a）X 、Y 坐标，控制点（ b）X、 Y 坐标，终点（ c）X 、Y 坐标。ctx.bezierCurveTo(20,10,268,10,268,170);ctx.stroke();

    技术分享

利用 clip 在指定区域绘图:

 

//绘制个圆ctx.arc(100,100,40,0,2*Math.PI,true); //目前已知只能用 arc、rect 设置区域//用 clip 函数将这个圆作为绘制操作的区域，之后画出的图形只能显示在这个区域内。也可使用 ctx.rect()绘制矩形区域。ctx.clip(); //对在这之前绘制的图像无效ctx.beginPath();ctx.fillStyle = "lightblue";ctx.fillRect(0,0,300,300);//绘制出来的矩形只能看到其在圆内的部分

　　技术分享

绘制自定义图形:

根据上面的图形进行组合，如：直线加三次贝塞尔曲线//绘制直线部分ctx.beginPath();ctx.lineWidth = 5;ctx.strokeStyle = "red";ctx.moveTo(100,150);ctx.lineTo(150,50);ctx.lineTo(200,150);ctx.lineTo(150,250);ctx.lineTo(100,150)ctx.stroke();//绘制三次贝尔塞尔曲线部分ctx.beginPath();ctx.moveTo(100,150);ctx.bezierCurveTo(50,100,100,0,150,50);ctx.bezierCurveTo(200,0,250,100,200,150);ctx.bezierCurveTo(250,200,200,300,150,250);ctx.bezierCurveTo(100,300,50,200,100,150);ctx.stroke();

　　技术分享

//可以根据对称性，设置特定的长度确定三次贝塞尔曲线的控制点，如上面例子中设置50.

//使用 beginPath()表示开始一段新的绘制，相当于局部函数区域，里面有的变量设置会覆盖外面的设置。

//综合绘制填充图片时，注意覆盖顺序。

技术分享

绘制文本:

  • 绘制文字:
    //设置文字大小与字体ctx.font = "30px Arial";//使用函数 fillText 绘制文本，四个参数分别为文本字符串，默认点 a 的X 坐标，Y 坐标，文本最大宽度（可省略，在最大范围内为本身的宽度，超过范围则压缩。）ctx.fillText("Hello World",100,50); //可以用 fillStyle 设置字体颜色为单色或是设置好的颜色渐变 ;注意fillText 不能像fillRect 那样拆分成 fill 与rect 执行。

    　技术分享

    //使用函数 strokefill 绘制文本ctx.strokeText("Hello World",100,50);

    　　技术分享

  • 粗体效果:
    //使用 font-weight 值:normal(正常)， bold(粗体)，bolder(更粗 )，lighter( 更细)。ctx.font = “normal 30px Arial”;//或者使用数字ctx.font = “100 30px Arial”; / /目前已知只有 100、600 、900

     

  • 斜体效果:

    ctx.font = “italic 30px Arial”;

    　　

HTML-Canvas01


联系
我们