canvas 黑影和图型转换的示例编码

日期:2021-02-23 类型:科技新闻 

关键词:在线编辑图片,什么软件可以抠图,在线图片,p图软件电脑版,在线抠图

本文详细介绍了canvas 黑影和图型转换的示例编码,共享给大伙儿,实际以下:

1、黑影设定

1、黑影的色调:值为规范的CSS色调值,用于设置黑影色调实际效果,默认设置是透明的黑色

context.shadowColor = color;

2、黑影模糊不清度:客户设置黑影的模糊不清水平,其标值不跟像素挂钩,默认设置为0

context.shadowBlur = 5;

3、黑影的偏位:

shadowOffsetX 和 shadowOffsetY 用来设置黑影在 X 和 Y 轴的拓宽间距。负值表明黑影会往上或左拓宽,恰逢则表明会往下或右拓宽,它们默认设置都为 0

context.shadowOffsetX = 10; //恰逢:往右
context.shadowOffsetY = 10;  //恰逢:往下

4、设定文本黑影的事例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF⑻">
        <title></title>
        <style type="text/css">
            canvas{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <canvas id="mycanvas" width="500" height="500"></canvas>
    </body>
    <script type="text/javascript">
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        context.font = "bold 50px 微软雅黑";
        context.fillStyle="red";
        //黑影的色调
        context.shadowColor = "orangered";
        //黑影模糊不清度
        context.shadowBlur = 20;
        //黑影的偏位
        context.shadowOffsetX = 10; //恰逢:往右
        context.shadowOffsetY = 10;  //恰逢:往下
        context.fillText("你好",100,100);
    </script>
</html>


 

2、图型转换

大家以前在2D转换中也学习培训过这些专业知识,可是大家canvas图型转换有一定的不一样,不一样点便是这里的转换其实不是转换图型,而是转换座标系,因而,大家在转换完1个图型以后,座标系就产生转换了,那末大家假如再立即制图的话就会出現难题,下面大家来实际是甚么状况吧

1、以便认证大家上面的说法,大家看来1个事例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF⑻">
        <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");
        //用黑色平行线线表明刚开始的x/y轴
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.lineTo(800,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.lineTo(0,800);
        context.stroke();
        //原矩形框:蓝色
        context.beginPath();
        context.fillStyle = "cornflowerblue";
        context.fillRect(0,0,50,50);
        context.fill();
        //平移矩形框:粉色
        context.beginPath();
        context.translate(200,0)  //正:往右、下
        context.fillStyle = "deeppink";
        context.fillRect(0,0,50,50);
        context.fill();
        //用蓝色平行线表明平移之后的座标轴
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.lineTo(400,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.lineTo(0,400);
        context.stroke();
    </script>
</html>

获得以下实际效果:证实图型转换之后是更改了座标系的


 

2、转动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF⑻">
        <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");
        //用黑色平行线表明平移之后的座标轴
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.lineTo(800,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.lineTo(0,800);
        context.stroke();
        //原图:蓝色
        context.beginPath();
        context.fillStyle = "cornflowerblue";
        context.fillRect(100,0,50,50);
        context.fill(); 
        //转动:翠绿色
        context.beginPath();
        context.fillStyle = "limegreen";
        context.rotate(Math.PI/4);
        context.fillRect(100,0,50,50);
        //用蓝色平行线表明平移之后的座标轴
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.lineTo(800,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.lineTo(0,800);
        context.stroke();
    </script>
</html>

实际效果以下:


 

表明大家图型默认设置是绕canvas座标系原点转动的,图型在转动的全过程中,座标系也会跟随转动

3、图型放缩

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF⑻">
        <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");
        //用黑色平行线线表明刚开始的座标系
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 30;
        context.lineTo(100,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 30;
        context.lineTo(0,100);
        context.stroke();
        //原图:蓝色
        context.beginPath();
        context.fillStyle = "cornflowerblue";
        context.fillRect(100,0,50,50);
        context.fill();
        //放缩:粉色  ,变大/小座标系,图型尺寸也放缩
        context.scale(2,1);   //第1个主要参数是X轴放缩占比,第2个主要参数是Y轴放缩占比
        context.beginPath();
        context.fillStyle = "pink";
        context.fillRect(100,0,50,50);
    //用蓝色平行线表明平移之后的座标轴
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.strokeStyle = "blue";
        context.lineTo(100,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.strokeStyle = "blue";
        context.lineTo(0,100);
        context.stroke();
    </script>
</html>

实际效果以下:


 

大家能够看到,大家在变大X轴图型的宽度时,大家的座标系的X轴也跟随变大了

那大家在对canvas图型做转换以后,如何才可以再次再canvas上绘图大家大家要想的图型而又无需繁琐的方法将他更改的座标系修复呢?
 

恰好canvas有情况的储存和获得

例如大家拿上面写过的事例开展演试1下情况的储存和获得实际效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF⑻">
        <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");
        //用黑色平行线线表明刚开始的座标系
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 30;
        context.lineTo(100,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 30;
        context.lineTo(0,100);
        context.stroke();
        //原图:蓝色
        context.beginPath();
        context.fillStyle = "cornflowerblue";
        context.fillRect(100,0,50,50);
        context.fill();
        //放缩:粉色  ,变大/小座标系,图型尺寸也放缩
        context.save();
        context.scale(2,1);   //第1个主要参数是X轴放缩占比,第2个主要参数是Y轴放缩占比
        context.beginPath();
        context.fillStyle = "pink";
        context.fillRect(100,0,50,50);
        context.restore();
    //用蓝色平行线表明平移之后的座标轴
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.strokeStyle = "blue";
        context.lineTo(100,0);
        context.stroke();
        context.beginPath();
        context.moveTo(0,0);
        context.lineWidth = 10;
        context.strokeStyle = "blue";
        context.lineTo(0,100);
        context.stroke();
    </script>
</html>

正如你看到的实际效果图,大家在放缩以前储存了座标系的情况,也便是1刚开始未做任何变化的情况,随后在图象放缩以后大家又将这类情况获得到,也便是返回1刚开始未做任何变化的情况,这便是情况的储存和获得,这样便可以处理大家图型转换对座标系的危害了。
 

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。