canvas使用鼠标画画,涂鸦

最新推荐文章于 2022-12-19 15:07:54 发布

努力中的小曾

最新推荐文章于 2022-12-19 15:07:54 发布

阅读量746

点赞数

分类专栏： HTML5/CSS3 文章标签： html5涂鸦 canvas涂鸦 css3 文字涂鸦 canvas画画

本文链接：https://blog.csdn.net/bazcsx/article/details/98246644

版权

HTML5/CSS3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

canvas在画布上创建空心线条的文字

直接上代码了!!

html代码:

<!DOCTYPE html>
<html>
	<head>
	    <title>鼠标指针实现文字涂鸦</title>
	    <style type="text/css" media="screen">
	        #myCanvas{
	            background-color:lightgrey;
	            border-radius:5px;
	        }
	    </style>
	</head>
	<body>
	    <canvas id="myCanvas" width='400' height='250'>
	
	    </canvas>
	    <button id='clearCanvas'>清空画布</button>
	</body>
</html>

script代码:

<script src="js/jquery-3.2.1.js"></script>
<script>
    $(document).ready(function(){
        let myContext = document.getElementById('myCanvas').getContext('2d');
        let myClickX = new Array();
        let myClickY = new Array();
        let myClickDrag = new Array();
        let myPaint;


        function addClick(x,y,dragging){
            myClickX.push(x);
            myClickY.push(y);
            myClickDrag.push(dragging);
        }

        function redraw(){
            myContext.strokeStyle = 'green';
            myContext.lineJoin = 'round';
            myContext.lineWidth = 5;
            for(let i=0;i<myClickX.length;i++){
                myContext.beginPath();
                if(myClickDrag[i] && i){
                    myContext.moveTo(myClickX[i-1], myClickY[i-1])
                }else{
                    myContext.moveTo(myClickX[i]-1,myClickY[i])
                }
                myContext.lineTo(myClickX[i],myClickY[i]);
                myContext.closePath();
                myContext.stroke();
            }
        }

        $('#myCanvas').mousedown(function(e){
            myPaint = true;
            addClick(e.pageX-this.offsetLeft,e.pageY - this.offsetTop);
            redraw();
        })

        $('#myCanvas').mousemove(function(e){
            if(myPaint){
                addClick(e.pageX-this.offsetLeft,e.pageY - this.offsetTop,true);
            }
            redraw();
        })
        $("#myCanvas").mouseup(function(){
            myPaint = false;
        })

        $('#clearCanvas').click(function(){
            myContext.fillStyle = 'lightgrey'                      //设置背景颜色
            myContext.fillRect(0,0,400,250) //绘制背景矩形
            myClickX=[];
            myClickY=[];
            myClickDrag=[];
        })

    })
</script>

画个五角星以及清空画布效果

效果如下
在这里插入图片描述

努力中的小曾

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas使用鼠标画画,涂鸦

canvas在画布上创建空心线条的文字直接上代码了!!html代码:<!DOCTYPE html><html> <head> <title>鼠标指针实现文字涂鸦</title> <style type="text/css" media="screen"> #myCanvas{ ...
复制链接

扫一扫