[Html5]画布canvas以及动态生成算法

最新推荐文章于 2022-09-04 16:17:06 发布

Jia的博客

最新推荐文章于 2022-09-04 16:17:06 发布

阅读量1.5w

点赞数 2

分类专栏： Html5 jQuery JavaScript 文章标签： html5 canvas js jQuery java

本文链接：https://blog.youkuaiyun.com/Konaji/article/details/51848944

版权

JavaScript 同时被 3 个专栏收录

17 篇文章

订阅专栏

jQuery

7 篇文章

订阅专栏

Html5

5 篇文章

订阅专栏

本文探讨了HTML5的canvas标签，它作为图形容器允许开发者进行绘图操作。通过JavaScript，我们可以生成和操作画布，实现动态生成算法。内容包括如何根据图片数量创建多个画布并进行相关操作，同时提示需要引入jQuery库来辅助实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 5 canvas 标签表示一个图形的容器，可以通过该标签生成一个空白画布，从而进行绘图工作。

Html部分

<canvas id="canvas"></canvas>

JS部分

//获取画布
var c=document.getElementById("canvas");            
var ctx=c.getContext("2d");

canvas一些常用的JS操作

//清空画布
//绘制一个纯白色画布 0,0初始位置坐标， 200，200结束位置坐标
ctx.clearRect(0,0,200,200);
//重新在画布中添加原图片 0,0初始位置坐标， 200，200结束位置坐标
ctx.drawImage(img,0,0,200,200);

//复制 - 将画布1中的内容复制到画布2中
//获取画布1中，指定坐标区域的内容
var imgData=ctx.getImageData(0,0,200,200);
var c2=document.getElementById("myCanvas2");
var ctx2=c2.getContext("2d");
//将图像数据放回画布2  0,0坐标
ctx2.putImageData(imgData,0,0);

//绘制直线
//必须开启beginPath，否则可能会出现之前绘制过的线条
ctx.beginPath();
//开始位置坐标
ctx.moveTo(x1,y1);
//结束位置坐标
ctx.lineTo(x2,y2);
//绘制直线
ctx.stroke();
//必须释放closePath
ctx.closePath();

//绘制圈圈
//必须开启beginPath，否则可能会出现之前绘制过的圆圈
ctx.beginPath();
ctx.arc(x,y,10,0,2*Math.PI);
ctx.stroke();
//必须释放closePath
ctx.closePath();

//绘制文字                  
ctx.font="16px Arial";                  
ctx.fillText(user,x,y);

//Base64压缩
//获取画布中的图像数据，返回Base64压缩后的字符串
var canvas = c;
var dataURL = canvas.toDataURL();
// returns "data:image/png;base64,iVBORw0..."
//删除字符串前的提示信息 "data:image/png;base64,"
var b64 = dataURL.substring( 22 );
console.log(b64);

根据图片个数，为每张图片生成一个画布，并且可以操作画布

注：需要自己引入jQuery

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-3.0.0.js"></script>
    <script type="text/javascript">

        //是否可以进行直线标记
        var flag = false;
        //是否可以进行圆圈标记
        var flag1 = false;
        //是否可以进行文字标记
        var flag2 = false;
        //标记的开始坐标
        var x1 = -10000;
        var y1 = -10000;
        //标记的结束坐标
        var x2 = -10000;
        var y2 = -10000;

        //查找所有图片,动态创建画布
        function newCanvas (){
            //查找所有图片，并且生成画布
            $("#body").find("img").each(function(i,e){
                //获取图片长度宽度
                var imgWidth = $(this).attr("width");
                var imgHeight = $(this).attr("height");

                //根据图片动态创建画布
                var canvas = document.createElement("canvas");
                canvas.width = imgWidth;
                canvas.height = imgHeight;
                canvas.id = "canvas"+i;
                $(canvas).css("border", "1px solid #d3d3d3");
                document.getElementById("myCan").appendChild(canvas);

                //获取画布
                var c=document.getElementById("canvas"+i);          
                var ctx=c.getContext("2d");

                //给画布绘制图片
                var imgId = $(this).attr("id");
                var img=document.getElementById(imgId);
                $(img).ready(function() {
                    ctx.drawImage(img,0,0,imgWidth,imgHeight);
                }); 
            });
        }


        //动态清空所有画布
        function clearCanvas (){
            //查找所有图片，并且清空画布
            $("#body").find("img").each(function(i,e){
                //获取图片长度宽度
                var imgWidth = $(this).attr("width");
                var imgHeight = $(this).attr("height");
                //获取图片元素
                var img = e;

                //查找所有画布
                $("#body").find("canvas").each(function(i,e){

                    //获取画布
                    var c= e;           
                    var ctx=c.getContext("2d");

                    //绘制一个纯白色画布
                    ctx.clearRect(0,0,imgWidth,imgHeight);
                    //重新将原图片加入到画布中
                    ctx.drawImage(img,0,0,imgWidth,imgHeight);
                });
            });
        }

        //动态获取所有画布的Base64压缩数据
        function copyCanvas (){
            //查找所有画布
            $("#body").find("canvas").each(function(i,e){
                var canvas = e;
                var dataURL = canvas.toDataURL();
                var b64 = dataURL.substring( 22 );
                console.log(b64);
                console.log("**********************************************");
            });
        }


        $(document).ready(function(){

            //查找所有图片,动态创建画布
            newCanvas();

            //标记按钮
            $("#mark").click(function(){
                flag = true;
            });
            //圆圈按钮
            $("#circle").click(function(){
                flag1 = true;
            });
            //清空按钮
            $("#clear").click(function(){
                //动态清空所有画布
                clearCanvas();
            });
            //字体按钮
            $("#writeFont").click(function(){
                flag2 = true;
            });
            //获取base64压缩数据
            $("#getData").click(function(){
                //动态获取所有画布的Base64压缩数据
                copyCanvas ();
            });
            //给页面所有画布设置点击事件
            $(document).find("canvas").each(function(i){
                $(this).bind("click", mouseMove);
            });

            //画布绘制标记
            function mouseMove(event){
                var id = $(this).attr("id");
                var c=document.getElementById(id);
                var ctx=c.getContext("2d");
                //如果激活了直线标记按钮
                if(flag){
                    //获取点击位置的相对坐标
                    var coord = getXAndY(event,$(this));
                    var x = coord.x;
                    var y = coord.y;
                    if(x1==-10000&&y1==-10000){
                        //还未进行选择开始位置的坐标
                        x1 = x;
                        y1 = y;
                    }else if (x2==-10000&&y2==-10000){
                        //还未进行选择结束位置的坐标
                        x2 = x;
                        y2 = y;

                        //绘制标记
                        //必须开启beginPath，否则可能会出现之前绘制过的线条
                        ctx.beginPath();
                        ctx.moveTo(x1,y1);
                        ctx.lineTo(x2,y2);
                        ctx.stroke();
                        //必须释放closePath
                        ctx.closePath();
                        //初始化
                        flag = false;
                        x1 = -10000;
                        y1 = -10000;
                        x2 = -10000;
                        y2 = -10000;
                    }else{
                        alert("浏览器异常，请按F5刷新页面重新标记！");
                    }
                }else{
                    //alert("请先点击标记按钮再进行标记！");
                }

                //如果激活了圆圈按钮
                if(flag1){
                    //获取点击位置的相对坐标
                    var coord = getXAndY(event,$(this));
                    var x = coord.x;
                    var y = coord.y;
                    //绘制圆圈标记
                    ctx.beginPath();
                    ctx.arc(x,y,10,0,2*Math.PI);
                    ctx.stroke();
                    //初始化
                    flag1 = false ; 
                }

                //如果激活了文字标记按钮
                if(flag2){
                    //获取点击位置的相对坐标
                    var coord = getXAndY(event,$(this));
                    var x = coord.x;
                    var y = coord.y;

                    var user = window.prompt("请输入标记内容","");
                    //确定
                    if(user){
                        //绘制文字标记
                        ctx.font="16px Arial";
                        ctx.fillText(user,x,y);
                    }
                    //初始化
                    flag2 = false;
                }

            }

            //获取鼠标点击画布区域中的相对位置坐标
            function getXAndY(event,clickDom){
                //鼠标点击的绝对位置
                Ev= event || window.event;
                var mousePos = mouseCoords(event);
                var x = mousePos.x;
                var y = mousePos.y;
                //alert("鼠标点击的绝对位置坐标："+x+","+y);

                //获取canvas画布在body中的绝对位置
                var x1 = $(clickDom).offset().left;
                var y1 = $(clickDom).offset().top;
                //alert("画布在body中的绝对位置坐标："+x1+","+y1);

                //鼠标点击位置的相对于canvas画布的坐标
                var x2 = x - x1;
                var y2 = y - y1;
                //alert("画布在body中的相对位置坐标："+x2+","+y2);
                return {x:x2,y:y2};
            }

            //获取鼠标点击画布区域中的绝对位置坐标
            function mouseCoords(event){
                if(event.pageX || event.pageY){
                    return {x:event.pageX, y:event.pageY};
                }
                return{
                    x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
                    y:event.clientY + document.body.scrollTop - document.body.clientTop
                };
            }   

        });
    </script>
</head>
<body id="body">
    <div id="myCan">
    <p>Image to use:</p>
    <img id="scream" src="test.jpg" alt="The Scream" width="200" height="200"/>
    <img id="scream1" src="test.jpg" alt="The Scream" width="200" height="200"/>
    <p>Canvas:</p>
    </div>
    <input id="mark" type="button" value="标记" />
    <input id="circle" type="button" value="圈记" />
    <input id="writeFont" type="button" value="文字" />
    <input id="clear" type="button" value="清空" />
    <input id="getData" type="button" value="图片生成Base64压缩数据" />
</body>
</html>