码迷,mamicode.com
首页 > 其他好文 > 详细

在Canvas上拖动产生文字

时间:2016-03-01 23:57:43      阅读:602      评论:0      收藏:0      [点我收藏+]

标签:

拖动的幅度越大,字就会越大。

 

<!DOCTYPE html>
<html>
<head lang="en">
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            overflow: hidden;
        }

        canvas {
            cursor: crosshair;

        }

        span {
            font-family: ‘Georgia‘, cursive;
            font-size: 40px;
            position: fixed;
            top: 50%;
            left: 50%;
            color: #a79e17;
            margin-top: -40px;
            margin-left: -200px;
        }

    </style>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<canvas id=‘canvas‘></canvas>
<span id=‘info‘>不要客气,送你经书一卷。</span>


<script>
    // Application variables
    var position = {x: 0, y: window.innerHeight / 2};
    var counter = 0;
    var minFontSize = 3;
    var angleDistortion = 0;
    var letters = 观自在菩萨,行深般若波罗蜜多时,照见五蕴皆空,度一切苦厄。舍利子,色不异空,空不异色,色即是空,空即是色,受想行识,亦复如是。舍利子,是诸法空相,不生不灭,不垢不净,不增不减。是故空中无色,无受想行识,无眼耳鼻舌身意,无色声香味触法,无眼界,乃至无意识界,无无明,亦无无明尽,乃至无老死,亦无老死尽。无苦集灭道,无智亦无得。以无所得故。菩提萨埵,依般若波罗蜜多故,心无挂碍。无挂碍故,无有恐怖,远离颠倒梦想,究竟涅盘。三世诸佛,依般若波罗蜜多故,得阿耨多罗三藐三菩提。故知般若波罗蜜多,是大神咒,是大明咒,是无上咒,是无等等咒,能除一切苦,真实不虚。故说般若波罗蜜多咒,即说咒曰:揭谛揭谛,波罗揭谛,波罗僧揭谛,菩提萨婆诃。


    // Drawing variables
    var canvas;
    var context;
    var mouse = {x: 0, y: 0, down: false}

    function init() {
        canvas = document.getElementById(canvas);
        context = canvas.getContext(2d);
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        canvas.addEventListener(mousemove, mouseMove, false);
        canvas.addEventListener(mousedown, mouseDown, false);
        canvas.addEventListener(mouseup, mouseUp, false);
        canvas.addEventListener(mouseout, mouseUp, false);
        canvas.addEventListener(dblclick, doubleClick, false);

        window.onresize = function (ev) {
            var oEvent = event || ev;
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
    }

    function mouseMove(ev) {
        var oEvent = event || ev;
        mouse.x = oEvent.pageX;
        mouse.y = oEvent.pageY;
        draw();
    }

    function draw() {
        if (mouse.down) {
            var d = distance(position, mouse);
            var fontSize = minFontSize + d / 2;
            var letter = letters[counter];
            var stepSize = textWidth(letter, fontSize);

            if (d > stepSize) {
                var angle = Math.atan2(mouse.y - position.y, mouse.x - position.x);

                context.font = fontSize + "px Georgia";

                context.save();
                context.translate(position.x, position.y);
                context.rotate(angle);
                context.fillText(letter, 0, 0);
                context.restore();

                counter++;
                if (counter > letters.length - 1) {
                    counter = 0;
                }

                //console.log (position.x + Math.cos( angle ) * stepSize)
                position.x = position.x + Math.cos(angle) * stepSize;
                position.y = position.y + Math.sin(angle) * stepSize;

            }
        }
    }

    function distance(pt, pt2) {

        var xs = 0;
        var ys = 0;

        xs = pt2.x - pt.x;
        xs = xs * xs;

        ys = pt2.y - pt.y;
        ys = ys * ys;

        return Math.sqrt(xs + ys);
    }

    function mouseDown(ev) {
        var oEvent = ev || event
        mouse.down = true;
        position.x = oEvent.pageX;
        position.y = oEvent.pageY;

        document.getElementById(info).style.display = none;
    }

    function mouseUp(ev) {
        mouse.down = false;
    }

    function doubleClick(ev) {
        canvas.width = canvas.width;
    }

    function textWidth(string, size) {
        context.font = size + "px Georgia";

        if (context.fillText) {
            return context.measureText(string).width;
        } else if (context.mozDrawText) {
            return context.mozMeasureText(string);
        }

    }
    ;

    init();
</script>
</body>
</html>

 

在Canvas上拖动产生文字

标签:

原文地址:http://www.cnblogs.com/zcynine/p/5232810.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!