html页面标尺,canvas实现标尺.html

刻度尺

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.ruler-wrap {

width: 100%;

max-width: 600px;

/*height: 60px;*/

line-height: 1px;

overflow: hidden;

margin: 0 auto 50px;

}

.text-input{

display: block;

width: 100px;

height: 30px;

border-radius: 5px;

background: #f6f6f6;

border: none;

text-align: center;

font-size: 14px;

color: #4142cc;

font-weight: bold;

letter-spacing: 1px;

margin: 0 auto;

}

.text-input:focus{

outline: none;

}

//调用刻度尺方法

ruler.initPlugin({

el: "ruler", //容器id

startValue: 100,

background: "#f5f5f5",

success: function(res) {

console.log(res);

}

});

//调用刻度尺方法

ruler.initPlugin({

el: "ruler2", //容器id

maxScale: 300, //最大刻度

startValue: 50, //刻度开始的初始值

region: [10, 200], //选择刻度的区间范围

background: "#2bd4bc", //刻度尺背景色

markColor: "#c968ff", //中心刻度标记颜色

success: function(res) {

console.log(res);

}

});

var rulerText3 = document.getElementById("rulerText3");

rulerText3.value = 200;

//调用刻度尺方法

ruler.initPlugin({

el: "ruler3", //容器id

height: 50, //刻度尺高度

maxScale: 300, //最大刻度

startValue: 200, //刻度开始的初始值

region: [50, 220], //选择刻度的区间范围

background: "#ffa43c", //刻度尺背景色

color: "#fff", //刻度线和字体的颜色

markColor: "#3786db", //中心刻度标记颜色

isConstant: true, //是否不断地获取值

success: function(res) {

console.log(res);

rulerText3.value = res;

}

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史

html页面标尺,canvas实现标尺.html相关推荐

canvas绘制标尺
canvas绘制标尺 eg:[预览链接](https://jsfiddle.net/jaris/gz06j95p/) 发布时间: 2019-02-19 16:38:39 /*** canvas 绘制标 ...
html 判断页面支持canvas,HTML5 Canvas之测试浏览器是否支持Canvas的方法
在获取HTML页面上Canvas元素的引用后,我们需要测试一下该元素是否包含"上下文"(context).Canvas的上下文指的是由浏览器定义的用于绘画的平面.简单地说,如果上下 ...
QML之Canvas实现标尺(刻度尺)方案
环境:Qt5.12.1,MinGW 主要代码如下: import QtQuick 2.0 import QtQuick.Controls 2.12Canvas{z:5id: canvas_rulerw ...
android自定义标尺,Android自定义标尺滑动选择值效果
Android自定义标尺滑动选择值效果发布时间:2020-10-16 07:40:15 来源:脚本之家阅读:130 作者:676598624 本文实例为大家分享了Android实现滑动标尺选择值, ...
css 标尺,css纵向标尺如何制作
今天我的一位朋友不会写纵向标尺,我就帮忙了一下忙,现在整理出来了,但是没有前边的数字值,还望各位包涵. ul { list-style: none; } ul .right1 { position: ...
页面绘制 canvas 并转换成图片实现长按保存
前言基于 uni-app 进行m端 app 开发的时候,碰上一个需求是将卡片弹窗生成图片,之前工作有用过 html2image 等插件,虽然简单便捷,但是经常会碰见一些奇奇怪怪的兼容性问题,因此此次 ...
微信页面嵌入canvas画图安卓会下拉的bug
需要用canvas实现手写签名的功能然鹅微信打开页面安卓手机很不友好,我们需要固定的画布,在微信里面打开的链接页面如果没有经过特殊处理,往下画canvas的时候,页面下滑出现源站的域名,画图就会被 ...
fastadmin后台login登录页面增加canvas粒子动画背景
地址演示地址登录 <!DOCTYPE html> <html> <head><link rel="stylesheet" media=&q ...
word一键排版工具_超赞的Word标尺小工具，轻松帮你搞定各种「对不齐」排版问题...
排版一直对不齐?图片点击居中了却没有真的居中?表格始终无法居中对齐? 猜你的Word文档还在使用空格控制缩进,其实最标准最快捷的办法是利用标尺,以上的问题都可以轻松解决. 标尺是啥?相信不熟悉WORD ...

html页面标尺,canvas实现标尺.html

html页面标尺,canvas实现标尺.html相关推荐

最新文章

热门文章