当前位置:   article > 正文

web怎么在圆圈里画半html,js在web页面上绘制圆形

position:absolute 循环标签画圆

在web页面上,想要画出一个圆形,方法有很多,SVG、canvas都可以绘图。但是本文不采用这两种方式,而是使用一个div。div一般是一个矩形,但是如果设置一个圆角样式border-radius就可以将div变成圆形。

圆的位置需要在画布中绝对定位(position: absolute),也就是通过设置X、Y坐标在定位,对应的css样式是left、top。想要圆的绝对定位起效,画布就要设置position:relative。

#drawing {

width: 500px;

height: 500px;

border:1px solid;

position: relative;

}

.circle {

background-color: green;

position: absolute;

}

0818b9ca8b590ca3270a3433284dd417.png

0818b9ca8b590ca3270a3433284dd417.png

通过以上原理,可以用jQuery实现这样一个交互:用鼠标在画布上按下左键拖动的方式来绘制圆,圆心是鼠标按下的位置,鼠标左键松开圆绘制完成。

#drawing {

width: 500px;

height: 500px;

border:1px solid;

position: relative;

overflow: hidden;

}

.circle {

background-color: green;

position: absolute;

}

$(document).ready(function() {

// 圆

var $circle = null;

// 画布

var $drawing = $("#drawing");

// 圆心位置

var centerX = 0;

var centerY = 0;

// 是否正在画圆

var isDrawing = false;

// 按下鼠标开始画圆

$drawing.mousedown(function(event) {

$circle = $('

centerX = event.pageX - $drawing.offset().left;

centerY = event.pageY - $drawing.offset().top;

$(this).append($circle);

isDrawing = true;

event.preventDefault();

});

// 鼠标拖动

$(document).mousemove(function(event) {

if(isDrawing) {

var radiusX = Math.abs(event.pageX - $drawing.offset().left - centerX);

var radiusY = Math.abs(event.pageY - $drawing.offset().top - centerY);

var radius = Math.sqrt(radiusX * radiusX + radiusY * radiusY); // 半径,勾股定理

// 下面四个条件判断是限制圆不能超出画布区域,如果不需要这个限制可以去掉这段代码

if(centerX - radius < 0) {

radius = centerX;

}

if(centerY - radius < 0) {

radius = centerY;

}

if(centerX + radius > $drawing.width()) {

radius = $drawing.width() - centerX;

}

if(centerY + radius > $drawing.height()) {

radius = $drawing.height() - centerY;

}

// 设置圆的大小和位置

$circle.css("left", centerX - radius + "px");

$circle.css("top", centerY - radius + "px");

$circle.css("width", 2 * radius + "px");

$circle.css("height", 2 * radius + "px");

$circle.css("border-radius", radius + "px");

}

});

// 鼠标松开停止画圆

$(document).mouseup(function() {

isDrawing = false;

});

});

由于圆都是绝对定位的,所以对画布中的其他元素的位置不会造成影响,也就是画布中可以放入其他想要的元素,例如图片。

至于实心圆、空心圆,还是透明的圆形,都可以通过css样式来控制,例如只设置border就是空心圆,设置background-color就是实心圆,设置opacity就是透明。

同样的原理,除了圆形之外,还可以画出矩形、正方形,实现难度都比画出圆形要简单的多,大家请自行脑补。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/96913
推荐阅读
相关标签
  

闽ICP备14008679号