从零开始 —— Canvas(一)

2021年09月15日 阅读数:2
这篇文章主要向大家介绍从零开始 —— Canvas(一),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

从零开始-Canvas

一、颜色、样式和阴影canvas

属性字体

  a、fillStyle(设置或返回用于填充绘画的颜色、渐变或模式)spa

    语法:context.fillStyle = color(颜色值) | gradient(渐变对象,线性或者放射性) | pattern(填充绘图的pattern对象) ;3d

 

    定义一个用蓝色填充的矩形code

<body>
//定义一个画布 <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas> <script> //DOM获取到这块画布 var c=document.getElementById("myCanvas"); //而后,建立 context 对象 //getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 var ctx=c.getContext("2d"); //填充画布的颜色 ctx.fillStyle="#0000ff"; //肯定画布的位置和大小 //四个参数分别为:   //画布在标签的初始x位置   //画布在标签的初始y位置   //画布的长度   /画布的宽度 ctx.fillRect(20,20,150,100); </script> </body>

    结果显示:对象

       

 

    定义从上到下的渐变,做为矩形的填充样式blog

<body>
    <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>

    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");

        //建立线性渐变
        //四个参数的含义:
        //渐变开始的点的x坐标
        //渐变开始的点的y坐标
        //渐变结束的点的x坐标
        //渐变结束的点的y坐标
        //提示:请使用该对象做为 strokeStyle 或 fillStyle 属性的值。

        //提示:请使用 addColorStop() 方法规定不一样的颜色,以及在 gradient 对象中的何处定位颜色。
        var my_gradient=ctx.createLinearGradient(0,0,0,170);

        //方法规定 gradient 对象中的颜色和位置。
        my_gradient.addColorStop(0,"black");
        my_gradient.addColorStop(1,"white");

        ctx.fillStyle=my_gradient;

        ctx.fillRect(20,20,150,100);
    </script>
</body>

  结果显示:ip

    

 

  b、strokeStyle(设置或返回用于笔触的颜色、渐变或模式)get

 

     绘制一个蓝色线条的矩形it

<body>
    <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>

    <script>
        var c=document.getElementById("myCanvas");

        var ctx=c.getContext("2d");

        ctx.strokeStyle="#0000ff";

        ctx.strokeRect(20,20,150,100);
    </script>
</body>

  结果显示:

    

 

    绘制一个渐变笔触的矩形框

<body>
    <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>

    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");

        var gradient=ctx.createLinearGradient(0,0,170,0);
        gradient.addColorStop("0","magenta");
        gradient.addColorStop("0.5","blue");
        gradient.addColorStop("1.0","red");

        // 用渐变进行填充
        ctx.strokeStyle=gradient;
        ctx.lineWidth=5;
        ctx.strokeRect(20,20,150,100);
    </script>
</body>

  结果显示:

    

 

     绘制一个渐变的字体

<body>
    <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>

    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");

        ctx.font="30px Verdana";
        // 建立渐变
        var gradient=ctx.createLinearGradient(0,0,c.width,0);
        gradient.addColorStop("0","magenta");
        gradient.addColorStop("0.5","blue");
        gradient.addColorStop("1.0","red");
        // 用渐变进行填充
        ctx.strokeStyle=gradient;
        //给context添加字体
        //strokeText有四个参数:
        //第一个参数:文本
        //第二个参数:开始绘制文本的x坐标(相对于画布)
        //第三个参数:开始绘制文本的y坐标(相对于画布)
        //第四个参数:可选,容许的最大文本宽度,以像素计。
        ctx.strokeText("Big smile!",10,50);
    </script>
</body>

  结果显示:

    

 

  c、shadowColor(设置或返回用于阴影的颜色)

    

    绘制一个带有黑色阴影的蓝色矩形

 

<body>
    <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>

    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");

        //设置用于阴影的模糊级别
        ctx.shadowBlur=20;

        //设置阴影颜色
        ctx.shadowColor="black";
        ctx.fillStyle="blue";
        ctx.fillRect(20,20,100,80);
    </script>
</body>

 

  结果显示:

    

 

 

  d、shadowBlur(设置或返回用于阴影的模糊级别)

 

     具体能够看c、shadowColor(设置或返回用于阴影的颜色)

 

  e、shadowOffsetX(设置或返回阴影距形状的水平距离)

 

    绘制一个矩形,带有向右偏移20像素的阴影(从矩形的left位置比较)

<body>
    <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>

    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
    
        //阴影模糊级别
        ctx.shadowBlur=10;

        //阴影横向偏移量
        ctx.shadowOffsetX=20;

        //阴影颜色
        ctx.shadowColor="black";
        ctx.fillStyle="blue";
        ctx.fillRect(20,20,100,80);
    </script>
</body>

  结果显示:

    

 

 

  f、shadowOffsetY(设置或返回阴影距形状的垂直距离) 

 

    具体能够看e、shadowOffsetX(设置或返回阴影距形状的水平距离)

 

方法

  a、createLinearGradient()  建立线性渐变

  b、createPattern()  在指定的方向上重复指定的元素

    语法:context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

    

    在水平和竖直方向重复图像

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");

//重复图像
var pat=ctx.createPattern(img,"repeat");

//建立矩形 ctx.rect(
0,0,150,100); ctx.fillStyle=pat; ctx.fill();

  结果显示:

    

 

 

  c、createRadialGradient()  建立放射状/环形的渐变

    语法:context.createRadialGradient(x0,y0,r0,x1,y1,r1);

      渐变开始圆x,y

      渐变开始圆半径

      渐变结束圆x,y

      渐变结束圆半径  

 

    绘制一个矩形,并用放射状/圆形渐变进行填充

<body>
    <canvas id="myCanvas" width="200" height="200" style="background:#ccc"></canvas>

    <script>
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");

        //createLinearGradient() 方法建立放射状/圆形渐变对象。
        //渐变可用于填充矩形、圆形、线条、文本等等。
        //提示:请使用该对象做为 strokeStyle 或 fillStyle 属性的值。
        //提示:请使用 addColorStop() 方法规定不一样的颜色,以及在 gradient 对象中的何处定位颜色。
        var grd=ctx.createRadialGradient(75,50,5,90,60,100);
        grd.addColorStop(0,"red");
        grd.addColorStop(1,"white");

        // Fill with gradient
        ctx.fillStyle=grd;
        ctx.fillRect(10,10,150,100);
    </script>
</body>

  结果显示:

    

 

 

  d、addColorStop()  规定渐变对象中的颜色和中止位置

 

    定义一个从黑到白的渐变,做为矩形的填充样式

var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');

var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");

ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);

  结果显示: