实现在画圆和直线

来源：互联网发布：python hsv颜色直方图编辑：程序博客网时间：2024/05/01 06:28

</body>

//取消所有元素的内外边距

*{
margin: 0;
padding: 0;
}

//设置画布的大小及边框的显示

#canvas{
   width: 500px;
   height: 500px;
   border: 2px solid cyan;
}

//设置a标签的样式

a{
    width: 20px;
    height: 20px;
    border: 1px solid blue;
    background-color:cyan;
}

//设置a标签获得焦点的样式

a:hover{
cursor:pointer;
}

//文档加载结束后会调用的事件
window.onload = function(){
   var canvas = document.getElementById("canvas");
   //获取画笔
   var paint= canvas.getContext("2d");
   //设置分辨率
   canvas.height=500;
   canvas.width=500;
   //当btn1被点击后调用的方法

    document.getElementById('btn1').onclick = function(){
       //画一个圆
       //1.开始路径
       paint.beginPath();
       //2，保存一个圆形路径
       paint.arc(10,10,10,0,Math.PI*2,false);
       //3，结束路径
       paint.closePath();
       //4，实心填充
       paint.fillStyle="blue";
       //5,开始画
       paint.fill();

    }

   document.getElementById("btn2").onclick=function(){
       paint.beginPath();
       //开始画线的点
       paint.moveTo(100,100);
       //结束的点
       paint.lineTo(200,400);
       paint.closePath();
       //线的颜色
       paint.strokeStyle='red';
       //线的粗细
       paint.lineWidth=5;
       //画线
       paint.stroke();

   }

}

0 0