jQuery jqxDraw 的 circle() 方法介绍

简介

jqxDraw 是一个基于 jQuery 的矢量图形绘制框架，可用于创建各种图形元素，如直线、矩形、多边形、文本、图像等。其中 circle() 方法用于在画布上绘制圆形。

语法

circle(x, y, r, attributes)

• x：圆心的 x 坐标。
• y：圆心的 y 坐标。
• r：圆的半径。
• attributes：可选参数，是一个对象，用于设置圆的属性，例如 fill、stroke、stroke-width、opacity 等。

示例

基本绘制

// 创建 jqxDraw 对象
var draw = $('#canvas').jqxDraw();

// 绘制圆形
draw.circle(50, 50, 30);

以上代码会在 id 为 canvas 的元素上创建一个半径为 30 的圆形，圆心坐标为 (50, 50)。

设置填充色和边框色

// 创建 jqxDraw 对象
var draw = $('#canvas').jqxDraw();

// 绘制圆形（设置填充色和边框色）
draw.circle(50, 50, 30, { fill: '#f00', stroke: '#00f', 'stroke-width': 2 });

以上代码会在 id 为 canvas 的元素上创建一个填充为红色、边框为蓝色、边框宽度为 2 的圆形。

添加透明度

// 创建 jqxDraw 对象
var draw = $('#canvas').jqxDraw();

// 绘制圆形（设置透明度）
draw.circle(50, 50, 30, { opacity: 0.5 });

以上代码会在 id 为 canvas 的元素上创建一个透明度为 50% 的圆形。

总结

jqxDraw 的 circle() 方法可用于在画布上绘制圆形，支持设置圆心坐标、半径和属性等参数，适用于创建各种基于圆形的图形元素。