当前位置：网站首页 / web前端 / 正文

AY H5笔记7-绘图支持剩余的部分

时间：2020年09月18日 | 作者 : aaronyang | 分类 : web前端 | 浏览: 1105次 | 评论 0 人

====================www.ayjs.net      杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========

向Canvas的当前路径上添加一段贝塞尔曲线（贝兹曲线或贝济埃曲线）

    bezierCurveTo(double cpX1,double cpY1,double cpX2,double cpY2,double x,double y)

image.png


4b90f603738da97737554a55b051f8198618e352.gif


开始点

第一个控制点cpX1,cpY1

第二个控制点cpX2,cpY2

结束点 x,y



向Canvas的当前路径上添加一段二次曲线

    quadraticCurveTo(double cpX,double cpY,double x,double y)


开始点

控制点cpX,cpY

结束点 x,y



请看代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>ay curveto</title>

    </head>
    <body>

        <div>
            <canvas id="mc" width="420" height="280" style="border:1px solid black">
            </canvas>
        </div>

        <script type="text/javascript">


            function createFlower(ctx,n,dx,dy,size,length) {
                ctx.beginPath();
                ctx.moveTo(dx, dy+size);
                var dig=2*Math.PI/n;
                for (var i = 1; i < n+1; i++) {
                    var ctrlx=Math.sin((i-0.5)*dig)*length+dx;
                    var ctrly=Math.cos((i-0.5)*dig)*length+dy;
                    var x=Math.sin(i*dig)*size+dx;
                    var y=Math.cos(i*dig)*size+dy;
                    ctx.quadraticCurveTo(ctrlx,ctrly,x,y);

                }
                ctx.closePath();
            }
            var canvas = document.getElementById("mc");
            var ctx = canvas.getContext("2d");
            createFlower(ctx,5,70,100,30,80);
        ctx.fillStyle="#F00";
        ctx.fill();

        createFlower(ctx,6,200,100,30,80);
        ctx.fillStyle="#dd0";
        ctx.fill();

        createFlower(ctx,7,330,100,30,80);
        ctx.fillStyle="#f0f";
        ctx.fill();
            
        </script>
    </body>
</html>

image.png



DrawImage(Image image,double x,double y)

把图片绘制到x,y处，不缩放，保持原大小


DrawImage(Image image,double x,double y,double width,double height)

把图片绘制到x,y处，根据width和height缩放


DrawImage(Image image,integer sx,integer sy,integer sw,integer,sh,double dx,double dy,double dw,double dh)

从image上 挖出 一块图

sx,sy从哪个位置开始

sw,sh挖的宽度和高度，类似C#的rect类型，左上角坐标，然后宽高

dx,dy绘制到canvas的哪个位置

dw,dh 绘制完指定宽高缩放



var image=new Image();

var image=new Image(宽，高);

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>ay drawimage</title>

</head>

<body>

    <div>
        <canvas id="mc" width="600" height="400" style="border:1px solid black">
        </canvas>
    </div>

    <script type="text/javascript">


        var canvas = document.getElementById("mc");
        var ctx = canvas.getContext("2d");
        var image = new Image();
        image.src = "http://www.wpfui.com/abl/o_37.jpg";
        image.onload = function () {
            ctx.drawImage(image, 20, 10);
            ctx.drawImage(image,200,10,70,100);
            var sd=50;
            var sh=66;
            ctx.drawImage(image,80,100,sd,sh,285,10,sd*3,sh*3);

        }


    </script>
</body>

</html>

image.png


坐标转换

类似wpf的transform

translate(double dx,double dy) 平移

scale(double dx,double sy) 缩放

rotate(double angle) 旋转

transform(double m11,double m12,double m21,double m22,double dx,double dy) 矩阵变换


多次变换，保存状态

save(); 保存当前的绘图状态

restore(); 恢复之前保存的绘图状态

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>ay drawimage</title>

</head>

<body>

    <div>
        <canvas id="mc" width="600" height="400" style="border:1px solid black">
        </canvas>
    </div>

    <script type="text/javascript">


        var canvas = document.getElementById("mc");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle="rgba(0,255,0,0.3)";
        ctx.translate(30,200);
        for (let index = 0; index < 50; index++) {
            ctx.translate(50,50);
            ctx.scale(0.93,0.93);
            ctx.rotate(-Math.PI/10);
            ctx.fillRect(0,0,150,75);
        }

    </script>
</body>

</html>


image.png



关于矩阵变换的效果，自己看看。

restore和save，后面会遇到


叠加风格

globalCompositeOperation

这个类似wpf的 geometry的重合后怎么处理。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>ay drawimage</title>

</head>

<body>

    <div>
        <canvas id="mc" width="600" height="400" style="border:1px solid black">
        </canvas>
    </div>

    <script type="text/javascript">


        var canvas = document.getElementById("mc");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "red";
        ctx.fillRect(20, 20, 75, 50);
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "blue";
        ctx.fillRect(50, 50, 75, 50);

        ctx.fillStyle = "red";
        ctx.fillRect(150, 20, 75, 50);
        ctx.globalCompositeOperation = "destination-over";
        ctx.fillStyle = "blue";
        ctx.fillRect(180, 50, 75, 50);

    </script>
</body>

</html>


source-over和destination-over

image.png

source-over，新绘制的在顶层。 默认值

destination-over:新绘制的放在原来的后面


下面都是先画红色，再蓝色的

source-in 新的和原来做in计算，只显示 重叠部分，其他部分透明

image.png

destination-in 原图形和新的做in计算，只显示重叠部分

image.png


source-out 新和原 做out运算，只显示 非重叠部分。

image.png

destination-out 原和新 做out运算，只显示 非重叠部分。

image.png

source-atop 只绘制 新与原重叠部分和 原图形未被覆盖的部分。

image.png

destination-atop 只绘制 原与新重叠部分和 新图形未被覆盖的部分。

image.png

lighter 新的和原都挥之，重叠部分绘制两种颜色值相加的颜色

image.png

xor 绘制新与原不重叠的部分。重叠地方变透明

image.png

copy 只绘制新图形

image.png


具体参考：https://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp


我看书上demo还有个clearRect(0,0,400,200);

清空一个位置的图案





画刷，类似wpf的画刷

<script type="text/javascript">


        var canvas = document.getElementById("mc");
        var ctx = canvas.getContext("2d");
        ctx.save();
        ctx.translate(30,20);

        var lg=ctx.createLinearGradient(0,0,160,80);
        lg.addColorStop(0.2,"#F00");
        lg.addColorStop(0.5,"#0F0");
        lg.addColorStop(0.9,"#00F");

        ctx.fillStyle=lg;

        ctx.fillRect(0,0,160,80);
        ctx.restore();

        ctx.translate(280,160);
        ctx.arc(0,0,80,0,Math.PI*2,true);
        ctx.closePath();


        ctx.lineWidth=12;
        var lg2=ctx.createLinearGradient(-40,-40,80,50);
        lg2.addColorStop(0.1,"#FF0");
        lg2.addColorStop(0.4,"#0FF");
        lg2.addColorStop(0.9,"#F0F");
        ctx.strokeStyle=lg2;
        ctx.stroke();



    </script>

前面这个数字是百分比，这条色带，0.2就是 20%是F00颜色的，然后0.2-0.5这个区间是0f0颜色的，以此类推。


image.png

====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========


也就是fillStyle可以渐变的，也可以是纯色，

关于var lg=ctx.createLinearGradient(0,0,160,80); 这个代码

也就是从0,0 坐标 到 160，80这个坐标，定义个渐变的方向，2个坐标决定一个矢量。

下面这个是wpf的

image.png

startpoint就是这里的第一个坐标，endpoint就是第二个


h5当然也有径向渐变。

createRadialGradient


由于我重点不是学h5绘图部分，主要还是做业务系统，这块就到这里，感兴趣的自己折腾

后面的

位图填充，类似wpf的 viewport，viewbox，区域图，然后怎么平铺

还有位图处理，类似wpf的control的clip属性，传入path路径，任意形状的图形

像素处理，类似wpf的shadereffect效果

输出位图

 canvas.toDataURL("image/png")

修改代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>ay drawimage</title>

</head>

<body>

    <div>
        <canvas id="mc" width="600" height="400" style="border:1px solid black">
        </canvas>
        <br/>
        <image id="result" src="" alt="图片输出" crossOrigin="Anonymous"/>
    </div>

    <script type="text/javascript">


        var canvas = document.getElementById("mc");
        var ctx = canvas.getContext("2d");
        ctx.save();
        ctx.translate(30,20);

        var lg=ctx.createLinearGradient(0,0,160,80);
        lg.addColorStop(0.2,"#F00");
        lg.addColorStop(0.5,"#0F0");
        lg.addColorStop(0.9,"#00F");

        ctx.fillStyle=lg;

        ctx.fillRect(0,0,160,80);
        ctx.restore();

        ctx.translate(280,160);
        ctx.arc(0,0,80,0,Math.PI*2,true);
        ctx.closePath();


        ctx.lineWidth=12;
        var lg2=ctx.createLinearGradient(-40,-40,80,50);
        lg2.addColorStop(0.1,"#FF0");
        lg2.addColorStop(0.4,"#0FF");
        lg2.addColorStop(0.9,"#F0F");
        ctx.strokeStyle=lg2;
        ctx.stroke();

document.getElementById("result").src=canvas.toDataURL("image/png");

    </script>
</body>

</html>

image.png

j就可以拖动输出的图片，进行保存

image.png

我们可以设置style="display: none;" 隐藏canvas

image.png

就可以矢量图，图片化



接下来的动画制作，

基于定时器的动画，

基于requestAnimationFrame的动画

这些如果你是玩效果的，可以学习下






关联的wpf的曲线文章

         [ay的wpf]写给自己的wpf高级教程 [14]-弧-ArcSegment[1/3]

         [ay的wpf]写给自己的wpf高级教程 [15]-弧-贝塞尔-BezierSegment[2/3]

         [ay的wpf]写给自己的wpf高级教程 [16]-弧-贝塞尔-BezierSegment[3/3]



推荐您阅读更多有关于“web前端，”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

  查看权限

抖音:wpfui 工作wpf

目前在合肥企迈科技公司上班，加我QQ私聊

2023年11月网站停运,将搬到CSDN上

AYUI8全源码 Github地址:前往获取

杨洋（AaronYang简称AY,安徽六安人）AY唯一QQ:875556003和AY交流

高中学历，2010年开始web开发,2015年1月17日开始学习WPF

声明:AYUI7个人与商用免费，源码可购买。部分DEMO不免费

查看捐赠

AYUI7.X MVC教程 更新如下：

第一课 第二课 程序加密教程

标签列表