canvas生成刻度尺

ruler.js
$.fn.ruler = function(opt) {
    var _default = {
        width:400,
        height:70,
        min:0,
        max:20,
        step:1
    }
    var settings = $.extend({},_default,opt);
    var _canvasW = $(this).width(),
        _canvasH = $(this).height();    
    
    var myCanvas = document.getElementById($(this).find("canvas").eq(0).attr("id"));
    myCanvas.width = _canvasW +25;
    myCanvas.height = _canvasH;     
    var ctx = myCanvas.getContext("2d");
    ctx.font="12px Microsoft Yahei";

//上边的遮罩
    var myCanvas2 = document.getElementById($(this).find("canvas").eq(1).attr("id"));
    myCanvas2.width = _canvasW +25;
    myCanvas2.height = _canvasH;     
    var ctx2 = myCanvas2.getContext("2d");
    ctx2.font="12px Microsoft Yahei";

ctx.clearRect(0, 0, _canvasW, _canvasH);
    var diff = settings.max -settings.min;
    if(settings.step < 1) {
        diff = diff.toFixed(1) * 10;
    }else {
        diff = diff / settings.step;
    }
    var ratio = diff / _canvasW;
    var tickSize = _canvasW / diff;
    var tickCnt = Math.ceil(_canvasW / tickSize);
    var x_h_pos = _canvasH/2 + 3;
    ctx.moveTo(10, x_h_pos);
    ctx.lineTo(_canvasW + 10, x_h_pos);
    for (var i = 0; i <= tickCnt; i++) {
        var lh = 5;
        if(settings.step > 1) {
            if(i % (10 / settings.step) == 0) {
                lh=12;
            }
        }else {
            if(i % 10 == 0) {
                lh=12;
                
            }
        }
        ctx.moveTo(10 + tickSize * i, x_h_pos);
        ctx.lineTo(10 + tickSize * i, x_h_pos-lh);
        ctx.textAlign = ‘center‘;
        
        if(settings.step >= 1) {
            if( i % (10 / settings.step) == 0 ) {
                ctx.fillText((settings.min + settings.step * i), 10 + tickSize * i,  70);
            }
            
        } else {
            if(i % 10 == 0) {
                ctx.fillText((settings.min + 0.1 * i).toFixed(1), 10 + tickSize * i,  70);
                
            }
            
        }
        
    }
    if(!!settings.person) {
        if(settings.step >= 1) {
            for(var j = 0 ; j<settings.person.length;j++) {
                var x = (settings.person[j].num - settings.min)*tickSize + 10 ;
                ctx.moveTo(x ,x_h_pos);
                ctx.lineTo(x , x_h_pos-30);
                
                if(!isLowerIE()) {
                    (function(obj,pos_x){
                        var img = new Image();
                        img.src = obj.src;
                        img.onload = function() {
                            ctx.drawImage(img,pos_x-7,x_h_pos-30);
                        }
                        
                    })(settings.person[j],x)
                    ctx.fillText(settings.person[j].num,x,x_h_pos - 35);
                }else{
                    (function(obj,pos_x){
                        ctx.fillText(obj.txt,pos_x,x_h_pos-30);
                    })(settings.person[j],x)
                    ctx.fillText(settings.person[j].num,x,x_h_pos - 40);
                }
            }
            ctx2.fillStyle=‘black‘;
            ctx2.globalAlpha=.2;
            ctx2.fillRect((settings.person[0].num - settings.min)*tickSize+ 10,x_h_pos-24,(settings.person[2].num - settings.person[0].num)*tickSize,x_h_pos - 28);
        }else{
            for(var j = 0 ; j<settings.person.length;j++) {
                var x = (settings.person[j].num - settings.min)*tickSize*10 + 10;
                ctx.moveTo(x ,x_h_pos);
                ctx.lineTo(x , x_h_pos-30);
                
                if(!isLowerIE()) {
                    (function(obj,pos_x){
                        var img = new Image();
                        img.src = obj.src;
                        img.onload = function() {
                            ctx.drawImage(img,pos_x-7,x_h_pos-30);
                        }
                    })(settings.person[j],x)
                        
                    ctx.fillText(settings.person[j].num.toFixed(1),x,x_h_pos - 35);
                }else{
                    (function(obj,pos_x){
                        ctx.fillText(obj.txt,pos_x,x_h_pos-30);
                    })(settings.person[j],x)
                    ctx.fillText(settings.person[j].num.toFixed(1),x,x_h_pos - 40);
                }
            }
            ctx2.fillStyle=‘black‘;
            ctx2.globalAlpha=.2;
            ctx2.fillRect((settings.person[0].num - settings.min)*tickSize*10+ 10,x_h_pos-24,(settings.person[2].num - settings.person[0].num)*tickSize*10,x_h_pos - 28);
        }
        
    }
    if(!!settings.orgs) {
        if(settings.step>=1) {
            for(var j = 0 ; j<settings.orgs.length;j++) {
                var x = (settings.orgs[j].num - settings.min)*tickSize + 10;
                ctx.moveTo(x, x_h_pos);
                ctx.lineTo(x, x_h_pos + 25);
                if(!isLowerIE()) {
                    (function(obj,pos_x){
                        var img = new Image();
                        img.src = obj.src;
                        img.onload = function() {
                            ctx.drawImage(img,pos_x-7,x_h_pos + 25);
                        }
                    })(settings.orgs[j],x)
                    ctx.fillText(settings.orgs[j].num,x,x_h_pos + 42);
                }else{
                    (function(obj,pos_x){
                        ctx.fillText(obj.txt,pos_x,x_h_pos + 37);
                    })(settings.orgs[j],x)
                    ctx.fillText(settings.orgs[j].num,x,x_h_pos + 47);
                }
            }
            ctx2.fillStyle=‘black‘;
            ctx2.globalAlpha=.1;
            ctx2.fillRect((settings.orgs[0].num - settings.min)*tickSize+ 10,x_h_pos,(settings.orgs[2].num - settings.orgs[0].num)*tickSize,x_h_pos - 30);
        }else{
            for(var j = 0 ; j<settings.orgs.length;j++) {
                var x = (settings.orgs[j].num - settings.min)*tickSize*10 + 10;
                ctx.moveTo(x, x_h_pos);
                ctx.lineTo(x, x_h_pos + 25);
                if(!isLowerIE()) {
                    (function(obj,pos_x){
                        var img = new Image();
                        img.src = obj.src;
                        img.onload = function() {
                            ctx.drawImage(img,pos_x-7,x_h_pos + 25);
                        }
                        
                    })(settings.orgs[j],x)
                    ctx.fillText(settings.orgs[j].num.toFixed(1),x,x_h_pos + 42);
                }else{
                    (function(obj,pos_x){
                        ctx.fillText(obj.txt,pos_x,x_h_pos + 37);
                    })(settings.orgs[j],x)
                    ctx.fillText(settings.orgs[j].num.toFixed(1),x,x_h_pos + 47);
                }
                
            }
            ctx2.fillStyle=‘black‘;
            ctx2.globalAlpha=.1;
            ctx2.fillRect((settings.orgs[0].num - settings.min)*tickSize*10 + 10,x_h_pos,(settings.orgs[2].num - settings.orgs[0].num)*tickSize*10 ,x_h_pos - 30);
        }
        
    }
    ctx.stroke();

function isLowerIE() {
        var userAgent = navigator.userAgent;
        var isOpera = userAgent.indexOf("Opera") > -1;
        if (userAgent.indexOf("Trident") > -1 && !isOpera) {
            var browser = navigator.appName;
            var b_version = navigator.appVersion;
            var version = b_version.split(";");
            var trim_Version = version[1].replace(/[ ]/g, "");
            if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") {
                return true;
            }
            else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") {
                return true;
            }
            else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0") {
                return true
            }else{
                return false;
            }
        }else{
            return false;
        }
    }
}

//为了兼容IE8 canvas必须定义在页面内，不能动态创建

//结构

<span class="rulers" data-person="[3.2,4.0,5.8]" data-orgs="[4.0,6.0,8.0]">
            <canvas id="container_ruler"></canvas>
             <canvas id="container_mark"></canvas>
 </span>

//为了兼容IE8引入excanvas.js

时间： 2024-10-23 09:46:52

canvas生成刻度尺的相关文章

用Canvas生成随机验证码(后端前端都可以)

一 .使用前端生成验证码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" width="120" height="40"></canvas> <

canvas生成遮罩图片

首先我们知道css3中增加了不少好用.好玩的css3样式可以使用.今天我们要说到是遮罩. 它的使用方式也不复杂,和background使用方式差不多.使用mask-image就可以使用,这样就可以通过图片合成一张带有形状的合成图了,不需要直接使用PS处理了.CSS遮罩——如何在CSS中使用遮罩,这篇文章已经详细说明了遮罩如何使用了,我这里就不赘述了.今天我这里想要说明的是,如何通过这个完成生成一个合成图片的逻辑. 它通过两种方式:前端JS+canvas,后端nodejs+canvas,完成基本思

Canvas 生成base64的PNG图片快照，So Amazing!!!

function canvasSupport(){     return Modernizr.canvas;}function callCanvasApps(){  var canvasOne=document.getElementById("canvasOne");  //if(!canvasSupport())      //return;  var context=canvasOne.getContext("2d");  context.fillStyle =

利用canvas生成二维码

实现原理是通过canvas利用input的value值在div内生成canvas绘制的二维码,然后toDataURL方法为img赋值最终实现二维码的生成和下载<html xmlns="http://www.w3.org/1999/xhtml"><head><title>收款二维码</title></head> <body class="hold-transition skin-blue sidebar-mini

利用纯JS和HTML Canvas生成随机迷宫过程中产生的有趣的事情

上效果图: #先看生成随机迷宫的代码吧↓ 1 <html> 2 <head> 3 <title>生成随机迷宫v1.0</title> 4 </head> 5 <body> 6 <center style="margin-top: 20px;"> 7 <canvas id="myCan1" title="作者:谢辉"></canvas> 8

微信小程序 canvas 生成随机验证码

https://blog.csdn.net/qq_16646819/article/details/81020245?utm_source=blogxgwz0 js 1 // pages/bind/bind.js 2 var app = getApp(); 3 var baseUrl = getApp().baseUrl; 4 var ctx; 5 Page({ 6 7 /** 8 * 页面的初始数据 9 */ 10 data: { 11 text: '', 12 }, 13 14 /** 15

js 利用canvas 生成文字图片

// text,需要生成的文字 // font,字体样式 drawLogo: function(text, font) { // 创建画布 let canvas = document.createElement('canvas'); // 绘制文字环境 let context = canvas.getContext('2d'); // 设置字体 context.font = font; // 获取字体宽度 let width = context.measureText(text).width;

JavaScript和html5 canvas生成圆形印章

代码: function createSeal(id,company,name){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); // 绘制印章边框 var width=canvas.width/2; var height=canvas.height/2; context.lineWidth=7; context.strokeStyle="#f00"; context.b

用canvas生成二维码

$("#actimg").qrcode({                        render: "canvas",    //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好                        text: "http://dolphinonline.52souhui.com/noAcitivity.html",    //扫描了二维码后的内容显示,在这里也可以直接填一个网址