H5 Canvas制作贝塞尔曲线

wap前端开发框架|js前端开发视频教程|移动端前端开发与pc端有哪些不同

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title></title>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
        }
        #canvas {
            position: absolute;
            top: 20px;
            left: 20px;
            /*border: 1px solid darkblue;*/
            z-index: 1;
        }
        #cp1 {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: red;
            position: absolute;
            top: 160px;
            left: 10px;
            z-index: 2;
        }
        #cp2 {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: #00BFFF;
            position: absolute;
            top: 460px;
            left: 310px;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div id=”cp1″></div>
    <div id=”cp2″></div>
    <canvas id=”canvas” width=”300″ height=”600″></canvas>
    <div id=”text”>
        cubic-bezier(0,1,1,0)
    </div>
    <script type=”text/javascript”>
        var canvas = document.getElementById(“canvas”);
        var ctx = canvas.getContext(“2d”);
        var cp1 = document.getElementById(“cp1”);
        var cp2 = document.getElementById(“cp2”);
        var textDiv = document.getElementById(“text”);
        function drawBack() {
            var gradient = ctx.createLinearGradient(0, 0, 0, 600);
            gradient.addColorStop(0, “white”);
            gradient.addColorStop(0.5, “#ccc”);
            gradient.addColorStop(1, “white”);
            ctx.beginPath();
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, 300, 600);
            //白条
            ctx.fillStyle = “white”;
            for (var i = 150; i < 450; i += 40) {
                ctx.beginPath();
                ctx.fillRect(0, i, 300, 20)
            }
            //x轴
            ctx.beginPath();
            ctx.strokeStyle = “black”;
            ctx.lineWidth = 1;
            ctx.moveTo(0, 450);
            ctx.lineTo(300, 450);
            ctx.stroke();
            //y轴
            ctx.beginPath();
            ctx.moveTo(1, 450);
            ctx.lineTo(1, 150);
            ctx.stroke();
        }
        function drawLine() {
            ctx.clearRect(0, 0, 300, 600);
            drawBack();
            ctx.beginPath();
            ctx.strokeStyle = “black”;
            ctx.lineWidth = 5;
            ctx.moveTo(0, 450);
            ctx.bezierCurveTo(cp1.offsetLeft – 10, cp1.offsetTop – 10, cp2.offsetLeft – 10, cp2.offsetTop – 10, 300, 150);
            ctx.stroke();
            //连线1
            ctx.beginPath();
            ctx.moveTo(cp1.offsetLeft – 10, cp1.offsetTop – 10);
            ctx.lineTo(0, 450);
            ctx.lineWidth = 2;
            ctx.stroke();
            //连线2
            ctx.beginPath();
            ctx.moveTo(cp2.offsetLeft – 10, cp2.offsetTop – 10);
            ctx.lineTo(300, 150);
            ctx.stroke();
            drawText();
        }
        //写字
        function drawText() {
            var p1X = ((cp1.offsetLeft – 10) / 300).toFixed(2);
            var p1Y = ((450 – (cp1.offsetTop – 10)) / 300).toFixed(2);
            var p2X = ((cp2.offsetLeft – 10) / 300).toFixed(2);
            var p2Y = ((450 – (cp2.offsetTop – 10)) / 300).toFixed(2);
            textDiv.innerHTML = “cubic-bezier(” + p1X + “,” + p1Y + “,” + p2X + “,” + p2Y + “)”;
        }
        cp1.onmousedown = function () {
            document.onmousemove = function (e) {
                var ev = e || window.event;
                var x = ev.clientX;
                var y = ev.clientY;
                if (x < 20) {
                    x = 20;
                }
                if (x > 320) {
                    x = 320
                }
                cp1.style.left = (x – 10) + “px”;
                cp1.style.top = (y – 10) + “px”;
                drawLine();
            }
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }
        cp2.onmousedown = function () {
            document.onmousemove = function (e) {
                var ev = e || window.event;
                var x = ev.clientX;
                var y = ev.clientY;
                if (x < 20) {
                    x = 20;
                }
                if (x > 320) {
                    x = 320;
                }
                cp2.style.left = (x – 10) + “px”;
                cp2.style.top = (y – 10) + “px”;
                drawLine();
            }
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }
        drawLine()
    </script>
</body>
</html>

游戏前端开发框架下载|硬件前端开发视频教程|移动前端开发就业前景

» 本文来自:前端开发者 » 《H5 Canvas制作贝塞尔曲线》
» 本文链接地址:https://www.rokub.com/5176.html
» 您也可以订阅本站:https://www.rokub.com
赞(1)
64K

评论 抢沙发

评论前必须登录!