画布项目

最新推荐文章于 2022-05-04 19:25:41 发布

誰会在乎誰灬

最新推荐文章于 2022-05-04 19:25:41 发布

阅读量538

点赞数

本文链接：https://blog.csdn.net/y14747963/article/details/59176353

版权

//下面是一个简单的画布项目，通过今天学习后随意敲的，还是比较有趣

<!DOCTYPE html>

<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript">
                   var canvas,context;
               window.οnlοad=function(){
                   //获得canvas对象--画布
               canvas=document.getElementById("c");
                   //使用cancas对象的getContext()方法
                   //来获得Context对象--画笔
               context=canvas.   getContext("2d");
                   //抗锯齿
               context.lineCap="round";
                   //粗细
               context.lineWidth=4;
                   //颜色
               context.strokeStyle="brown"
           canvas.οnmοusedοwn=function(event){
                   move1=event.offsetX;
                   move2=event.offsetY;
                   flag=true;
           }

           canvas.οnmοusemοve=function(event){
               if(flag){
                   //准备画线
               context.beginPath();
                   //确定起始点
               context.moveTo(move1,move2);
                   //确定结束点
               context.lineTo(event.offsetX,event.offsetY);
                   //连接起始结束点
               context.stroke();
                   //定义结束点为起始点
               move1=event.offsetX;
               move2=event.offsetY;
               }
           }
           canvas.οnmοuseup=function(){
                   flag=false;
           }

               }
</script>
<style type="text/css">
       #fl{
           float: left;
           margin-top: 15px;
       }
</style>
   </head>
   <body>
       <div>
           <div id="fl" style="background-color: red;width: 40px;height: 20px;"
               οnclick="context.strokeStyle='red'"></div>
           <div id="fl" style="background-color: blueviolet;width: 40px;height: 20px;"
               οnclick="context.strokeStyle='blueviolet'"></div>
           <div id="fl" style="background-color: greenyellow;width: 40px;height: 20px;"
               οnclick="context.strokeStyle='greenyellow'"></div>
           <div id="fl" style="background-color: teal;width: 40px;height: 20px;"
               οnclick="context.strokeStyle='teal'"></div>
           <div id="fl" style="background-color: firebrick;width: 40px;height: 20px;"
               οnclick="context.strokeStyle='firebrick'"></div>
           <div id="fl" style="background-color: darkorange;width: 40px;height: 20px;"
               οnclick="context.strokeStyle='darkorange'"></div>

           <div id="fl" >线条宽度：<input type="text" value="2" style="width: 100px;height: 25px;margin-left: 30px;"
               οnblur="context.lineWidth=this.value"></div>
           <div id="fl" ><input type="button" value="清空" οnclick="context.clearRect(0,0,800,500)"
               style="width: 100px;height: 30px;margin-left: 30px;font-size: 20px;"/></div>
           <br />

       <canvas id="c" width="800px" height="500px"
           style="border: 3px solid blueviolet;">
       </canvas>
       </div>
   </body>
</html>