Canvas画板实例

最新推荐文章于 2022-11-30 17:41:04 发布

xiaobangsky

最新推荐文章于 2022-11-30 17:41:04 发布

阅读量138

点赞数

分类专栏：前端体系构建文章标签： javascript

本文链接：https://blog.csdn.net/xiaobangsky/article/details/110096531

版权

前端体系构建专栏收录该内容

71 篇文章 2 订阅

订阅专栏

这篇博客介绍了一个HTML5 Canvas的实例，展示如何创建一个交互式的画板应用。通过监听触屏或鼠标事件，允许用户在画布上绘制线条。代码中设置了线条的样式、宽度和颜色，并实现了平滑的线条绘制效果。此外，还提供了画线函数的详细实现。

摘要由CSDN通过智能技术生成

代码示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>canvas实例-画板</title>
        <style>
			*{
			    margin: 0;
			    padding: 0;
			    box-sizing: border-box;
			}
			#canvas{
			    display: block;
			}
		</style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script>
            //通过id找到canvas
            let canvas = document.getElementById("canvas");
            //设置画布的宽度，获取的是文档的宽度
            canvas.width = document.documentElement.clientWidth;
            //设置画布的高度，获取的是文档的高度
            canvas.height = document.documentElement.clientHeight;
            //获取这个元素的context——图像稍后将在此被渲染
            let ctx = canvas.getContext("2d");
            //绘画的标志
            let painting = false;
            //设置图形的填充颜色为蓝色
            ctx.fillStyle = "blue";
            //设置图形轮廓的颜色为none
            ctx.strokeStyle = "blue";
            //lineCap修复线条的层次不齐的感觉
            ctx.lineCap = "round";
            //线的宽度
            ctx.lineWidth = 4;
            //判断是否支持触屏
            let isTouchDevice = "ontouchstart" in document.documentElement;
            //存储移动位置的横纵坐标数据
            let lastPosition = [];

            //支持触屏
            if(  isTouchDevice ) {
                //触屏事件
                canvas.ontouchstart = ( e ) => {
                    //横坐标数据
                    let x = e.touches[0].clientX;
                    //纵坐标数据
                    let y = e.touches[0].clientY;
                    //存放到坐标中
                    lastPosition = [x,y];
                }
                //移动事件
                canvas.ontouchmove = ( e ) => {
                    //横坐标数据
                    let x = e.touches[0].clientX;
                    //纵坐标数据
                    let y = e.touches[0].clientY;
                    //画线
                    drawLine(lastPosition[0],lastPosition[1],x,y);
                     //存放到坐标中
                    lastPosition = [x,y];
                }
            } else {
                //不支持触屏
                //鼠标按下事件
                canvas.onmousedown = ( e ) => {
                    //绘画的标志设置为true
                    painting = true;
                    //存放到坐标中
                    lastPosition = [e.clientX,e.clientY];
                }
                //鼠标移动事件
                canvas.onmousemove = ( e ) => {
                    //绘画的标志为true
                    if( painting === true) {
                        //画线
                        drawLine(lastPosition[0],lastPosition[1],e.clientX,e.clientY);
                        //存放到坐标中
                        lastPosition = [e.clientX,e.clientY];
                    }
                }
                //鼠标松开事件
                canvas.onmouseup = ( ) => {
                    //绘画的标志设置为false
                    painting = false;
                }
            }

            //画线函数
            function drawLine (x1, y1, x2, y2) {
                ctx.beginPath();
                ctx.moveTo(x1,y1);
                ctx.lineTo(x2,y2);
                ctx.closePath();
                ctx.fill();
                ctx.stroke();
            }
        </script>
    </body>
</html>