html5 画布图片合成编辑器 html5 canvas绘图

转载

锦绣前程未央 2023-10-17 04:30:12

文章标签 html5 画布图片合成编辑器 html HTML5 javascript 文章分类 HTML5 移动开发

DOM操作支持
使用HTML5的元素选择器
取得一个单个的对象：document.querySelector();
取得一组对象：document.querySelectorAll().
这种操作与jquery的功能是一样的。HTML5增加了DOM元素的选择功能，这一点要比传统的DOM
操作都容易；

利用Canvas实现页面的图形绘制操作。
如果要想使用Canvas那么首先应该开辟一块绘图的空间，也就是说所有需要绘制图形的
操作都在此空间完成，但是这个空间必须考虑到浏览器不支持的情况；
<canvas id="can" width="300" height="300">
当前浏览器不支持Canvas，请更换浏览器
</canvas>
如果此时浏览器不支持Canvas，那么就会出现错误的提示信息；
如果说现在只是有了一个空间，那么还无法进行图形的展示，因为还需要编写代码。

范例：准备绘制 canvas_demoa.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5</title>
    <script type="text/javascript">
          window.onload=function(){
              try{
              var  canvasObj=document.getElementById("can");//取得画板
              var ctx=canvasObj.getContext("20");//只支持2D图形·
          }catch(e){
              alert("当前浏览器不支持,请更换浏览器。");
          }
          }
    </script>
</head>
<body>
    <canvas id="can" width="300" height="300">
         当前浏览器不支持Canvas,请更换浏览器。
    </canvas>
</body>
</html>

但是在支持的浏览器上，此时的代码是没有任何问题的，只不过在不支持的浏览器上程序就会出现错误；
范例：画线操作 canvas_demob.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5</title>
  <style type="text/css">
     body{
      background: black;
     }
     canvas{
      background: white;
     }
  </style>
    <script type="text/javascript">
          window.onload=function(){
              try{
              var  canvasObj=document.getElementById("can");//取得画板
              var ctx=canvasObj.getContext("2d");//只支持2D图形
            ctx.beginPath();//确定开始进行绘图
            ctx.moveTo(50,50);//确定画图的开始点,x轴与y轴
            ctx.lineTo(200,150);//表示画线的结束点
            ctx.stroke();//表示绘制完成
          }catch(e){
              alert("错误，当前的浏览器不支持本页操作");
          }
          }
    </script>
</head>
<body>
    <canvas id="can" width="300" height="300">
         当前浏览器不支持Canvas,请更换浏览器。
    </canvas>
</body>
</html>

范例：定义按钮进行绘图，同时观察程序问题 canvas_democ.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5</title>
  <style type="text/css">
     body{
      background: black;
     }
     canvas{
      background: white;
     }
  </style>
    <script type="text/javascript">
          window.onload=function(){
            document.getElementById("mybut").addEventListener("click",function(){
            try{
            var canvasObj=document.getElementById("can");//取得画板
            var ctx=canvasObj.getContext("2d");//只支持2D图形
            ctx.save();//闭合开始
            ctx.beginPath();//确定开始进行绘图
            ctx.translate(50,50);
            ctx.moveTo(50,50);//确定画图的开始点,x轴与y轴
            ctx.lineTo(150,50);
            cxt.lineTo(150,100);
            ctx.lineTo(50,100);
            ctx.lineWidth=5;//粗线条
            ctx.strokeStyle="green";//改变线条的颜色
            //ctx.lineTo(50,50);
            ctx.closePath();//闭合图形
            ctx.stroke();//表示绘制完成
            ctx.restore();//闭合结束
          }catch(e){
            alert("错误，当前的浏览器不支持本页操作");
          }
            },false);
              
          }

    </script>
</head>
<body>
    <canvas id="can" width="300" height="300">
         当前浏览器不支持Canvas,请更换浏览器。
    </canvas>
    <input type="button" id="mybut" value="画矩形" >
</body>
</html>

最早的操作形式我们是直接在页面加载的时候执行的，但是现在利用了按钮来绘图；
每一次绘图都会进行平移，而最为理想的绘图实际上应该是在一个地方一直绘图下去，
那么要想完成这一操作就必须进行闭合处理。
范例：闭合操作
在一般进行绘图的时候都会将某些操作进行闭合，这样可以准确的绘制所需要的图形。
在进行绘图的时候为了方便用户绘图图形提供有一个闭合绘图的函数。
既然是图形就给点粗线
现在默认情况下的合并点出都使用是直角的方式。所以可以进行连接点的改变，有以下的几种形式：
bevel:表示使用斜角
round:表示使用圆角
miter:默认，使用尖角
范例：修改连接点 canvas_demod.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5</title>
  <style type="text/css">
     body{
      background: black;
     }
     canvas{
      background: white;
     }
  </style>
    <script type="text/javascript">
          window.onload=function(){
            document.getElementById("mybut").addEventListener("click",function(){
              try{
            var canvasObj=document.getElementById("can");//取得画板
            var ctx=canvasObj.getContext("2d");//只支持2D图形
            ctx.save();//闭合开始
            ctx.beginPath();//确定开始进行绘图
            ctx.translate(50,50);
            ctx.moveTo(50,50);//确定画图的开始点,x轴与y轴
            ctx.lineTo(150,50);
            cxt.lineTo(150,100);
            ctx.lineTo(50,100);
            ctx.lineWidth=5;//粗线条
            ctx.strokeStyle="green";//改变线条的颜色
            ctx.lineJoin="round";
            ctx.fillStyle="yellow";//使用黄色填充
            //ctx.lineTo(50,50);
            ctx.closePath();//闭合图形
            ctx.stroke();//表示绘制完成
            ctx.restore();//闭合结束
          }catch(e){
            alert("错误，当前的浏览器不支持本页操作");
          }
            },false);
              
          }

    </script>
</head>
<body>
    <canvas id="can" width="300" height="300">
         当前浏览器不支持Canvas,请更换浏览器。
    </canvas>
    <input type="button" id="mybut" value="画矩形" >
</body>
</html>

为了让绘图的效果好看一些，可以设置填充操作。
范例：使用黄色进行填充
以上实际上就属于一些最基础的图形绘制，如果这些操作要结合一些JavaScript控制变量。
一般画图是麻烦的，最简单的做法是进行图片的加载。
例如，现在在images目录下存在有这个图片。canvas_demof.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5</title>
  <style type="text/css">
     body{
      background: black;
     }
     canvas{
      background: white;
     }
  </style>
    <script type="text/javascript">
          window.onload=function(){
            document.getElementById("mybut").addEventListener("click",function(){
              try{
                var img=new Image();//定义一个图片对象
                img.src="images/ball.png";
            var canvasObj=document.getElementById("can");//取得画板
            var ctx=canvasObj.getContext("2d");//只支持2D图形
            ctx.save();//闭合开始
            ctx.beginPath();//确定开始进行绘图
            ctx.translate(50,50);//平移位置
            ctx.moveTo(50,50);//确定画图的开始点,x轴与y轴
            ctx.drawImage(img,50,50);//设置图片绘制的开始点
            
            ctx.stroke();//表示绘制完成
            ctx.restore();//闭合结束
          }catch(e){
            alert("错误，当前的浏览器不支持本页操作");
          }
            },false);
              
          }

    </script>
</head>
<body>
    <canvas id="can" width="300" height="300">
         当前浏览器不支持Canvas,请更换浏览器。
    </canvas>
    <input type="button" id="mybut" value="画矩形" >
</body>
</html>

图片静态的待着意义不大，希望可以将图片拖动。canvas_demog.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5</title>
  <style type="text/css">
     body{
      background: black;
     }
     canvas{
      background: white;
     }
  </style>
    <script type="text/javascript">
          window.onload=function(){
            document.getElementById("mybut").addEventListener("click",function(){
              try{
                var img=new Image();//定义一个图片对象
                img.src="images/ball.png";
            var canvasObj=document.getElementById("can");//取得画板
            var ctx=canvasObj.getContext("2d");//只支持2D图形
            img.onload=function(){
              ctx.beginPath();
              ctx.drawImage(img,50,50);
              ctx.stroke();
            }
            //随后现在需要处理的是一个鼠标的操作事件
            canvasObj.onmousedown=function(e1){//如果要想拖，必须要想点
             //  alert(e1.clientX+","+e1.clientY);
                ctx.moveTo(e1.clientX,e1.clientY);
                canvasObj.onmousemove=function(e2){//鼠标移动
                  ctx.drawImage(img,e2.clientX,e2.clientY);
                  ctx.stroke();
                }
                canvasObj.onmouseup=function(){
                  canvasObj.onmousedown=null;
                  canvasObj.onmouseup=null;
                }
            }
          }catch(e){
            alert("错误，当前的浏览器不支持本页操作");
          }
            },false);
              
          }

    </script>
</head>
<body>
    <canvas id="can" width="300" height="300">
         当前浏览器不支持Canvas,请更换浏览器。
    </canvas>
    
</body>
</html>

范例：小球拖运 canvas_demo1.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML5</title>
  <style type="text/css">
     body{
      background: black;
     }
     canvas{
      background: white;
     }
  </style>
    <script type="text/javascript">
          window.onload=function(){
            document.getElementById("mybut").addEventListener("click",function(){
              try{
                var img=new Image();//定义一个图片对象
                img.src="images/ball.png";
            var canvasObj=document.getElementById("can");//取得画板
            var ctx=canvasObj.getContext("2d");//只支持2D图形
            img.onload=function(){
              ctx.beginPath();
              ctx.drawImage(img,50,50);
              ctx.stroke();
            }
            //随后现在需要处理的是一个鼠标的操作事件
            canvasObj.onmousedown=function(e1){//如果要想拖，必须要想点
             //  alert(e1.clientX+","+e1.clientY);
                ctx.moveTo(e1.clientX,e1.clientY);
                canvasObj.onmousemove=function(e2){//鼠标移动
                  ctx.rect(0,0,canvasObj.width,canvasObj.height);
                  ctx.fillStyle="white";
                  ctx.fill();
                  ctx.drawImage(img,e2.clientX,e2.clientY);
                  ctx.stroke();
                }
                canvasObj.onmouseup=function(){
                  canvasObj.onmousedown=null;
                  canvasObj.onmouseup=null;
                }
            }
          }catch(e){
            alert("错误，当前的浏览器不支持本页操作");
          }
            },false);
              
          }

    </script>
</head>
<body>
    <canvas id="can" width="300" height="300">
         当前浏览器不支持Canvas,请更换浏览器。
    </canvas>
    
</body>
</html>

在整个HTML5里面由于存在有Canvas支持，所以一些游戏的开发多了起来；

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。