图形绘制H5前端开发技巧_ 中级Canvas

前端开发好用的动画插件|前端开发的动画实例|网站前端开发

为画布中元素应用图形变换

平移
context.translate(150, 150);
两个参数是(x,y)坐标值,表示把2D渲染上下文的原点移动多远.

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端和ios怎么配合开发Canvas</title>
    <script src=”https://cdn.bootcss.com/jquery/2.2.1/jquery.js”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id=”canvas” width=”1000″ height=”500″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <script type=”text/javascript”>
        $(function () {
            var canvas = $(“#canvas”);
            var context = canvas.get(0).getContext(“2d”);
            context.fillRect(150, 150, 100, 100);
            context.translate(100, 100);
            context.fillStyle = “#f90”;
            context.fillRect(150, 150, 100, 100);
        })
    </script>
</body>
</html>

[quote]
缩放
context.scale(2, 2);
将2D渲染上下文的x和y方向都乘以2。
[/quote]
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>南京java前端开发工资:Canvas</title>
    <script src=”https://cdn.bootcss.com/jquery/2.2.1/jquery.js”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id=”canvas” width=”1000″ height=”500″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <script type=”text/javascript”>
        $(function () {
            var canvas = $(“#canvas”);
            var context = canvas.get(0).getContext(“2d”);
            context.save(); //保存画布的状态
            context.translate(200, 50); //将原点移动到(200, 50)
            context.scale(3, 1); //将画布分别放大3倍和1倍
            context.fillStyle = “#f90”;
            context.fillRect(0, 0, 100, 100); //在位置(0, 0)绘制
            context.restore(); //恢复画布的状态
            context.fillRect(0, 0, 100, 100);
        })
    </script>
</body>
</html>

[quote]
旋转
context.rotate(0.7854); // Rotate 45 degrees (Math.PI/4)
context.fillRect(0, 0, 100, 100);
注意:rotate方法是把2D渲染上下文绕其原点(0,0)进行旋转的。如果你只想旋转所要绘制的图形,那么这样肯定不行,还是需要借助translate()方法。
[/quote]
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>python前端 java后端开发:Canvas</title>
    <script src=”https://cdn.bootcss.com/jquery/2.2.1/jquery.js”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id=”canvas” width=”1000″ height=”500″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <script type=”text/javascript”>
        $(function () {
            var canvas = $(“#canvas”);
            var context = canvas.get(0).getContext(“2d”);
            context.save(); //保存画布的状态
            context.translate(200, 0); //将原点移动到(200, 50)
            context.rotate(Math.PI / 4); //旋转45度
            context.fillStyle = “#f90”;
            context.fillRect(-50, -50, 100, 100);
            context.translate(100, 0);
            context.rotate(Math.PI / 1);
            context.fillStyle = “#f40”;
            context.fillRect(0, 0, 100, 100);
            context.restore(); //恢复画布的状态
            context.fillRect(0, 0, 100, 100);
        })
    </script>
</body>
</html>

[quote]
变换矩阵

context.transform(a,b,c,d,e,f);
a,b,c,d,e,f分别对应 xScale, xSkew, xTrans, ySkew, yScale, ytrans;

[/quote]
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>html5前端开发常用代码:Canvas</title>
    <script src=”https://cdn.bootcss.com/jquery/2.2.1/jquery.js”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id=”canvas” width=”1000″ height=”500″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <script type=”text/javascript”>
        $(function () {
            var canvas = $(“#canvas”);
            var ctx = canvas.get(0).getContext(“2d”);
            ctx.fillStyle = “#eee”;
            ctx.fillRect(0, 0, 250, 100)
            ctx.transform(1, 0.5, -0.5, 1, 30, 10);
            ctx.fillStyle = “#ddd”;
            ctx.fillRect(0, 0, 250, 100);
            ctx.transform(1, 0.5, -0.5, 1, 30, 10);
            ctx.fillStyle = “#ccc”;
            ctx.fillRect(0, 0, 250, 100);
        })
    </script>
</body>
</html>

将多个可视化元素组合成为一个可视化元素

[quote]先了解一下画布中最简单的合成方法,即globalAlpha属性
globalAlpha设置的是全局阿尔法值,这个值会在后续应用rgba颜色值等阿尔法值时被参照。[/quote]
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>html5前端开发好学吗?Canvas</title>
    <script src=”https://cdn.bootcss.com/jquery/2.2.1/jquery.js”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id=”canvas” width=”1000″ height=”500″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <script type=”text/javascript”>
        $(function () {
            var canvas = $(“#canvas”);
            var ctx = canvas.get(0).getContext(“2d”);
            ctx.fillStyle = “rgb(60, 160, 250)”;
            ctx.fillRect(100, 100, 100, 100);
            ctx.globalAlpha = 0.8;
            ctx.fillStyle = “rgb(255, 123, 172)”;
            ctx.fillRect(150, 50, 100, 100);
        })
    </script>
</body>
</html>

[quote]合成操作
globalCompositeOperation支持的11种选择,原文请戳标题链接。[/quote]
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>html5手机前端开发Canvas</title>
    <script src=”https://cdn.bootcss.com/jquery/2.2.1/jquery.js”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id=”canvas” width=”500″ height=”200″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <canvas id=”canvas1″ width=”500″ height=”200″></canvas>
    <canvas id=”canvas2″ width=”500″ height=”200″></canvas>
    <canvas id=”canvas3″ width=”500″ height=”200″></canvas>
    <canvas id=”canvas4″ width=”500″ height=”200″></canvas>
    <canvas id=”canvas5″ width=”500″ height=”200″></canvas>
    <script type=”text/javascript”>
        $(function () {
            var canvas = $(“#canvas”);
            var ctx = canvas.get(0).getContext(“2d”);
            ctx.fillStyle = “rgb(60, 160, 250)”;
            ctx.fillRect(100, 100, 100, 100);
            ctx.globalAlpha = 0.8;
            ctx.fillStyle = “rgb(255, 123, 172)”;
            ctx.fillRect(150, 50, 100, 100);
            var canvas1 = $(“#canvas1”);
            var ctx1 = canvas1.get(0).getContext(“2d”);
            ctx1.fillStyle = “rgb(60, 160, 250)”;
            ctx1.fillRect(100, 100, 100, 100);
            ctx1.globalCompositeOperation = “source-over”;
            ctx1.fillStyle = “rgb(255, 123, 172)”;
            ctx1.fillRect(150, 50, 100, 100);
            var canvas2 = $(“#canvas2”);
            var ctx2 = canvas2.get(0).getContext(“2d”);
            ctx2.fillStyle = “rgb(60, 160, 250)”;
            ctx2.fillRect(100, 100, 100, 100);
            ctx2.globalCompositeOperation = “source-atop”;
            ctx2.fillStyle = “rgb(255, 123, 172)”;
            ctx2.fillRect(150, 50, 100, 100);
            var canvas3 = $(“#canvas3”);
            var ctx3 = canvas3.get(0).getContext(“2d”);
            ctx3.fillStyle = “rgb(60, 160, 250)”;
            ctx3.fillRect(100, 100, 100, 100);
            ctx3.globalCompositeOperation = “source-out”;
            ctx3.fillStyle = “rgb(255, 123, 172)”;
            ctx3.fillRect(150, 50, 100, 100);
            var canvas4 = $(“#canvas4”);
            var ctx4 = canvas4.get(0).getContext(“2d”);
            ctx4.fillStyle = “rgb(60, 160, 250)”;
            ctx4.fillRect(100, 100, 100, 100);
            ctx4.globalCompositeOperation = “lighter”;
            ctx4.fillStyle = “rgb(100, 123, 172)”;
            ctx4.fillRect(150, 50, 100, 100);
            var canvas5 = $(“#canvas5”);
            var ctx5 = canvas5.get(0).getContext(“2d”);
            ctx5.fillStyle = “rgb(60, 160, 250)”;
            ctx5.fillRect(100, 100, 100, 100);
            ctx5.globalCompositeOperation = “xor”;
            ctx5.fillStyle = “rgb(100, 123, 172)”;
            ctx5.fillRect(150, 50, 100, 100);
        })
    </script>
</body>
</html>

[quote]####用来创建多边形和曲线

quadraticCurveTo()方法,有4个参数:控制点的(x,y)坐标值,以及路径目标点的(x,y)坐标。
bezierCurveTo()有6个参数:第一个控制点的(x,y)坐标值,第二个控制点(x,y),以及路径目标点的(x,y)坐标。

[/quote]
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>h5开发与前端开发有何区别?Canvas</title>
    <script src=”https://cdn.bootcss.com/jquery/2.2.1/jquery.js”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
        h4 {
            text-align: center;
        }
    </style>
</head>
<body>
    <canvas id=”canvas” width=”500″ height=”200″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <h4>创建二次贝塞尔曲线</h4>
    <canvas id=”canvas1″ width=”500″ height=”200″></canvas>
    <h4>创建三次贝塞尔曲线</h4>
    <canvas id=”canvas2″ width=”500″ height=”200″></canvas>
    <script type=”text/javascript”>
        $(function () {
            var canvas = $(“#canvas”);
            var ctx = canvas.get(0).getContext(“2d”);
            ctx.beginPath();
            ctx.moveTo(250, 30);
            ctx.lineTo(300, 130);
            ctx.lineTo(200, 130);
            ctx.closePath();
            ctx.stroke();
            ctx.fill();
            var canvas1 = $(“#canvas1”);
            var ctx1 = canvas1.get(0).getContext(“2d”);
            ctx1.lineWidth = 3;
            ctx1.beginPath();
            ctx1.moveTo(100, 100);
            ctx1.quadraticCurveTo(250, 0, 400, 100)
            ctx1.stroke();
            var canvas2 = $(“#canvas2”);
            var ctx2 = canvas2.get(0).getContext(“2d”);
            ctx2.lineWidth = 3;
            ctx2.beginPath();
            ctx2.moveTo(100, 100);
            ctx2.bezierCurveTo(250, -150, 350, 300, 400, 100)
            ctx2.stroke();
        })
    </script>
</body>
</html>

将画布图像数据保存为一个HTML图像元素

toDataURL方法,这个简单的方法能够将画布绘图转换为一个数据URL,我们可以通过它在浏览器上显示一个图像。
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>h5前端开发ide:Canvas</title>
    <script src=”https://cdn.bootcss.com/jquery/2.2.1/jquery.js”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
        h4 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h4>准备导出的画布</h4>
    <canvas id=”canvas” width=”500″ height=”300″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <h4>右键点击即可查看图片</h4>
    <canvas id=”canvas1″ width=”500″ height=”200″></canvas>
    <script type=”text/javascript”>
        $(function () {
            var canvas = $(“#canvas”);
            var ctx = canvas.get(0).getContext(“2d”);
            ctx.save();
            ctx.fillRect(50, 0, 100, 100);
            ctx.fillStyle = “#f90”;
            ctx.fillRect(100, 50, 100, 100);
            ctx.restore();
            ctx.fillRect(150, 100, 100, 100);
            var dataURL = canvas.get(0).toDataURL();
            var img = $(“<img></img”);
            img.attr(“src”, dataURL);
            $(“#canvas1”).replaceWith(img);
        })
    </script>
</body>
</html>

从外部读取已有的图像文件到Canvas中

[quote]
context.drawImage(image, x, y);
需要三个参数:所绘制的图像和图像绘制位置的(x,y)坐标。
[/quote]
原图:

HTML5Canvas图形绘制中级
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>h5混合式开发前端调试:Canvas</title>
    <script src=”https://cdn.bootcss.com/jquery/2.2.1/jquery.js”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
        h4 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h4>将图片导入到画布</h4>
    <canvas id=”canvas” width=”500″ height=”300″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <script type=”text/javascript”>
        $(function () {
            var canvas = $(“#canvas”);
            var ctx = canvas.get(0).getContext(“2d”);
            var image = new Image();
            image.src = “http://cdn.attach.qdfuns.com/notes/pics/201710/17/174240gjuz7e5dd7sfhyhy.png”;
            $(image).load(function () {
                ctx.drawImage(image, 0, 0);
            });
        })
    </script>
</body>
</html>

根据应用场景来调整或裁剪图像

[quote]调整图像大小:
context.drawImage(image, x, y, width, height);
裁剪图像:
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
它总共有9个参数: 源图像、源图像的裁剪区原点坐标(x,y)、源图像的裁剪区宽度和高度、在画布(目标)上绘制图像的原点坐标(x,y)及在画布上绘制图像的宽度和高度。
[/quote]
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>做h5前端开发可以接私活吗?Canvas</title>
    <script src=”https://cdn.bootcss.com/jquery/2.2.1/jquery.js”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
        h4 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h4>调整或裁剪图像</h4>
    <canvas id=”canvas” width=”500″ height=”300″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <canvas id=”canvas1″ width=”500″ height=”300″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <script type=”text/javascript”>
        $(function () {
            var canvas = $(“#canvas”);
            var canvas1 = $(“#canvas1”);
            var ctx = canvas.get(0).getContext(“2d”);
            var ctx1 = canvas1.get(0).getContext(“2d”);
            var image = new Image();
            image.src = “http://cdn.attach.qdfuns.com/notes/pics/201710/17/174240gjuz7e5dd7sfhyhy.png”;
            $(image).load(function () {
                ctx.drawImage(image, 0, 0, 300, 200);
                ctx1.drawImage(image, 0, 0, 500, 250, 50, 50, 500, 250);
            });
        })
    </script>
</body>
</html>

和图形一样,图像也支持几何变换

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>h5前端开发简单吗?Canvas</title>
    <script src=”https://cdn.bootcss.com/jquery/2.2.1/jquery.js”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
        h4 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>几何变形</h2>
    <h4>平移</h4>
    <canvas id=”canvas” width=”500″ height=”300″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <h4>旋转</h4>
    <canvas id=”canvas1″ width=”500″ height=”300″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <script type=”text/javascript”>
        $(function () {
            var canvas = $(“#canvas”);
            var canvas1 = $(“#canvas1”);
            var ctx = canvas.get(0).getContext(“2d”);
            var ctx1 = canvas1.get(0).getContext(“2d”);
            ctx.translate(100, 50);
            ctx1.translate(200, 0);
            ctx1.rotate(0.7854);
            var image = new Image();
            var image1 = new Image();
            image.src = “http://cdn.attach.qdfuns.com/notes/pics/201710/18/095144rnh33qyebb2k5rqn.jpg”;
            image1.src = “http://cdn.attach.qdfuns.com/notes/pics/201710/18/095144rnh33qyebb2k5rqn.jpg”;
            $(image).load(function () {
                ctx.drawImage(image, 0, 0, 350, 150);
            });
            $(image1).load(function () {
                ctx1.drawImage(image, 0, 0, 350, 200);
            });
        })
    </script>
</body>
</html>

缩放与翻转,制作一个变形翻转图像
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>h5开发和前端开发Canvas</title>
    <script src=”https://cdn.bootcss.com/jquery/2.2.1/jquery.js”></script>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
        canvas {
            display: block;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
        h2,
        h4 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>几何变形</h2>
    <h4>平移和翻转</h4>
    <canvas id=”canvas” width=”800″ height=”700″>当前浏览器不支持canvas,请更换浏览器使用!</canvas>
    <script type=”text/javascript”>
        $(function () {
            var canvas = $(“#canvas”);
            var canvas1 = $(“#canvas1”);
            var ctx = canvas.get(0).getContext(“2d”);
            var image = new Image();
            image.src = “http://cdn.attach.qdfuns.com/notes/pics/201710/20/095143gcjuc1i88gmxttdc.jpg”;
            $(image).load(function () {
                // Top-left
                ctx.translate(50, 50);
                ctx.drawImage(image, 50, 50, 400, 400, 0, 0, 300, 300);
                // Top-right
                ctx.setTransform(1, 0, 0, 1, 0, 0);
                ctx.translate(700, 50);
                ctx.scale(-1, 1); //水平x沿y轴对折
                ctx.drawImage(image, 50, 50, 400, 400, 0, 0, 300, 300);
                // Left-bottom
                ctx.setTransform(1, 0, 0, 1, 0, 0);
                ctx.translate(50, 600);
                ctx.scale(1, -1);
                ctx.drawImage(image, 50, 50, 400, 400, 0, 0, 300, 300);
                // Right-bottom
                ctx.setTransform(1, 0, 0, 1, 0, 0);
                ctx.translate(700, 600);
                ctx.scale(-1, -1);
                ctx.drawImage(image, 50, 50, 400, 400, 0, 0, 300, 300);
            });
        })
    </script>
</body>
</html>

HTML5 Canvas 图形绘制 初级|前端开发和h5的区别|h5页面开发 前端

» 本文来自:前端开发者 » 《图形绘制H5前端开发技巧_ 中级Canvas》
» 本文链接地址:https://www.rokub.com/3804.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!