html5 canvas+js鼠标拖动喷字笔刷特效免费下载

一款非常有创意的html5 canvas+js鼠标拖动喷字笔刷特效,鼠标拖动喷出中文字符进行绘图,文字颜色随机,文字的大小跟拖动的速度有关,拖动速度越快则越大。

JS代码

<script type="text/javascript"> 
var Xin = (function(){ 
    var canvas,ctx,W,H,fontsize,texts,isMouseDown,mouse,position,pos; 
    function init(){ 
        canvas = document.createElement("canvas"); 
        ctx = canvas.getContext("2d"); 
        canvas.width = W = window.innerWidth; 
        canvas.height = H = window.innerHeight; 
        document.body.appendChild(canvas); 
        fontsize = 3; //最小字号 
        texts = '富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善、'; 
        isMouseDown = false; 
        mouse = {x : 0, y : 0 }; 
        position = {x : 0, y : 0 }; 
        pos = 0; 
        bindEvents(); 
    } 
    function bindEvents(){ 
        window.onmousedown = handleMouseDown; 
        window.onmousemove = handleMouseMove; 
        window.onmouseup = handleMouseUp; 
        window.onmouseout = handleMouseUp; 
        window.onresize = handleResize; 
    } 
    function handleResize(){ 
        canvas.width = window.innerWidth; 
        canvas.height = window.innerHeight; 
    } 
    function handleMouseDown(){ 
        isMouseDown = true; 
        position.x = event.pageX; 
        position.y = event.pageY; 
    } 
    function handleMouseMove(){ 
        if(isMouseDown){ 
            mouse.x  = event.pageX; 
            mouse.y  = event.pageY; 
            var d = caculateLength(mouse,position), 
                fontSize = fontsize + d /2, //计算在不同鼠标速度下的文字字号 
                text = texts[pos], 
                stepSize = textWidth(ctx,fontSize,text); //计算位置的宽度 
            if(d>stepSize){ 
                //计算偏离角度 
                var angle = Math.atan2(mouse.y-position.y,mouse.x-position.x); 
                //绘制文字 
                ctx.font = fontSize + "px Arial"; 
                ctx.fillStyle = randC(); 
                ctx.save(); 
                ctx.translate(position.x,position.y); 
                ctx.rotate(angle); 
                ctx.fillText(text,0,0); 
                ctx.restore(); 
                pos++; 
                if(pos==texts.length){ 
                    pos = 0; 
                } 
                //更新位置 
                position.x += stepSize * Math.cos(angle); 
                position.y += stepSize * Math.sin(angle); 
            } 
        } 
    } 
    function handleMouseUp(){ 
        isMouseDown = false; 
    } 
    function caculateLength(p1,p2){ 
        return Math.sqrt(Math.pow(p2.x-p1.x,2)+Math.pow(p2.y-p1.y,2)); 
    } 
    function textWidth(ctx,fontSize,text){ 
        ctx.font = fontSize + "px Arial"; 
        if(ctx.fillText){ 
            return ctx.measureText(text).width; 
        }else if(ctx.mozDrawText){ 
            return ctx.mozMeasureText(text); 
        } 
    } 
    function randC(){ 
        return 'rgb(' + (~~(Math.random()*255)) + "," + (~~(Math.random()*255)) + "," + (~~(Math.random()*255)) + ")"; 
    } 
    return { init : init } 
})(); 
Xin.init(); 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录