html5绘制折线图,Canvas绘制转盘抽奖

html5绘制折线图,html5绘制折线

html5绘制折线图详细代码

<html>
<canvas id="a_canvas" width="1000" height="700"></canvas>
<script>

               (function (){

        window.addEventListener("load", function(){

          var data = [100,-1000,0,700];

          // 获取上下文
          var a_canvas = document.getElementById('a_canvas');
          var context = a_canvas.getContext("2d");


          // 绘制背景
          var gradient = context.createLinearGradient(0,0,0,300);


         // gradient.addColorStop(0,"#e0e0e0");
          //gradient.addColorStop(1,"#ffffff");


          context.fillStyle = gradient;

          context.fillRect(0,0,a_canvas.width,a_canvas.height);


          // 描绘边框
          var grid_cols = data.length + 1;
          var grid_rows = 4;
          var cell_height = a_canvas.height / grid_rows;
          var cell_width = a_canvas.width / grid_cols;
          context.lineWidth = 1;
          context.strokeStyle = "#a0a0a0";

          // 结束边框描绘
          context.beginPath();
          // 准备画横线
         /*for (var col = 0; col <= grid_cols; col++) {
            var x = col * cell_width;
            context.moveTo(x,0);
            context.lineTo(x,a_canvas.height);
          }
          // 准备画竖线
          for(var row = 0; row <= grid_rows; row++){
            var y = row * cell_height;
            context.moveTo(0,y);
            context.lineTo(a_canvas.width, y);
          }*/
     //划横线
     context.moveTo(0,a_canvas.height/2);
   context.lineTo(a_canvas.width,a_canvas.height/2);

   //画竖线
    context.moveTo(0,0);
            context.lineTo(0,a_canvas.height);


          context.lineWidth = 1;
          context.strokeStyle = "#c0c0c0";
          context.stroke();

          var max_v =0;

          for(var i = 0; i<data.length; i++){
     var d=0;
     if(data[i]<0)
     {d=d-data[i];
      }
      else{d=data[i];};
            if (d > max_v) { max_v =d};
          }
          max_v = max_v * 1.1;
          // 将数据换算为坐标
          var points = [];
          for( var i=0; i < data.length; i++){
            var v= data[i];
            var px = cell_width * (i +1);
            var py = a_canvas.height/2 - a_canvas.height*(v / max_v)/2;
            points.push({"x":px,"y":py});
          }
          // 绘制折现
          context.beginPath();
          context.moveTo(points[0].x, points[0].y);
          for(var i= 1; i< points.length; i++){
            context.lineTo(points[i].x,points[i].y);
          }


          context.lineWidth = 2;
          context.strokeStyle = "#8BA9FF";
          context.stroke();

          //绘制坐标图形
          for(var i in points){
            var p = points[i];
            context.beginPath();
   context.arc(p.x,p.y,4,0,2*Math.PI);
   //实心圆
           /*
            context.fillStyle = "#000";*/
   //空心圆
   context.strokeStyle = "#000";
   context.stroke();
   context.fillStyle="white";
            context.fill();
          }
    //添加文字
    for(var i in points)
    {  var p = points[i];
            context.beginPath();
   context.fillStyle="black";
      context.fillText(data[i], p.x + 1, p.y - 15);

     }
        },false);
      })();


</script>
</html>

永利澳门游戏网站,  运维结果如下:

永利澳门游戏网站 1

 

html5绘制折线图详细代码 htmlcanvas id=”a_canvas” width=”1000″
height=”700″/canvasscript (function (){
window.addEventListener(“loa…

你或者感兴趣的小说:

  • JS+HTML5
    Canvas达成轻巧的写字板功能示例
  • Javascript HTML5
    Canvas达成的叁个画板
  • html5+javascript制作简单画板附图
  • javascript结合html5
    canvas达成(可调画笔颜料/粗细/橡皮)的涂鸦板
  • JS+html5
    canvas达成的轻巧绘制折线图效果示例
  • js+html5贯彻canvas绘制圆形图案的法子
  • js+html5贯彻canvas绘制镂空字体文本的点子
  • js+html5绘制图片到canvas的章程
  • javascript+HTML5
    Canvas绘制转盘抽取奖金
  • JavaScript+html5
    canvas绘制的小丑效果
  • 原生JS+HTML5落到实处的可调治写字板功效示例

 •html5中canvas标签的利用
 •jQueryRotate.js旋转插件

最后
那玩意儿和IOS里面包车型地铁Quartz2D手艺大概同样….
详见代码>>>>点击下载.rar) 

 <body>
  <div class="content">
    <div class="wheel">
      <canvas class="item" id="wheelCanvas" width="422px" height="422px"></canvas>
      <img class="pointer" src="images/wheel-pointer.png"/>
    </div>
  </div>
  <div class="tips" >
    jason
  </div>
</body>
</html>

5.核心js代码

1.兑现的中央职能

/*
 * 渲染转盘
 * */
function drawWheelCanvas(){

  // 获取canvas画板,相当于layer??
  var canvas = document.getElementById("wheelCanvas");
//  var canvas = ($("#wheelCanvas")).get()[0]; // 注意,jQuery获取的是包装过的对象,不是DOM对象,可以进行转换

  // 计算每块占的角度,弧度制
  var baseAngle = Math.PI * 2 / (turnWheel.rewardNames.length);
  // 获取上下文
  var ctx=canvas.getContext("2d");

  var canvasW = canvas.width; // 画板的高度
  var canvasH = canvas.height; // 画板的宽度
  //在给定矩形内清空一个矩形
  ctx.clearRect(0,0,canvasW,canvasH);

  //strokeStyle 绘制颜色
  ctx.strokeStyle = "#FFBE04"; // 红色
  //font 画布上文本内容的当前字体属性
  ctx.font = '16px Microsoft YaHei';

  // 注意,开始画的位置是从0°角的位置开始画的。也就是水平向右的方向。
  // 画具体内容
  for(var index = 0 ; index < turnWheel.rewardNames.length ; index++)
  {
    // 当前的角度
    var angle = turnWheel.startAngle + index * baseAngle;
    // 填充颜色
    ctx.fillStyle = turnWheel.colors[index];

    // 开始画内容
    // ---------基本的背景颜色----------
    ctx.beginPath();
    /*
     * 画圆弧,和IOS的Quartz2D类似
     * context.arc(x,y,r,sAngle,eAngle,counterclockwise);
     * x :圆的中心点x
     * y :圆的中心点x
     * sAngle,eAngle :起始角度、结束角度
     * counterclockwise : 绘制方向,可选,False = 顺时针,true = 逆时针
     * */
    ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.outsideRadius, angle, angle + baseAngle, false);
    ctx.arc(canvasW * 0.5, canvasH * 0.5, turnWheel.insideRadius, angle + baseAngle, angle, true);
    ctx.stroke();
    ctx.fill();
    //保存画布的状态,和图形上下文栈类似,后面可以Restore还原状态(坐标还原为当前的0,0),
    ctx.save();

    /*----绘制奖品内容----重点----*/
    // 红色字体
    ctx.fillStyle = "#E5302F";
    var rewardName = turnWheel.rewardNames[index];
    var line_height = 17;
    // translate方法重新映射画布上的 (0,0) 位置
    // context.translate(x,y);
    // 见PPT图片,
    var translateX = canvasW * 0.5 + Math.cos(angle + baseAngle / 2) * turnWheel.textRadius;
    var translateY = canvasH * 0.5 + Math.sin(angle + baseAngle / 2) * turnWheel.textRadius;
    ctx.translate(translateX,translateY);

    // rotate方法旋转当前的绘图,因为文字适合当前扇形中心线垂直的!
    // angle,当前扇形自身旋转的角度 + baseAngle / 2 中心线多旋转的角度 + 垂直的角度90°
    ctx.rotate(angle + baseAngle / 2 + Math.PI / 2);

    /** 下面代码根据奖品类型、奖品名称长度渲染不同效果,如字体、颜色、图片效果。(具体根据实际情况改变) **/
    // canvas 的 measureText() 方法返回包含一个对象,该对象包含以像素计的指定字体宽度。
    // fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色. fillStyle 属性以另一种颜色/渐变来渲染文本
    /*
     * context.fillText(text,x,y,maxWidth);
     * 注意!!!y是文字的最底部的值,并不是top的值!!!
     * */
    if(rewardName.indexOf("M")>0){//查询是否包含字段 流量包
      var rewardNames = rewardName.split("M");
      for(var j = 0; j<rewardNames.length; j++){
        ctx.font = (j == 0)?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
        if(j == 0){
          ctx.fillText(rewardNames[j]+"M", -ctx.measureText(rewardNames[j]+"M").width / 2, j * line_height);
        }else{
          ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);
        }
      }
    }else if(rewardName.indexOf("M") == -1 && rewardName.length>6){//奖品名称长度超过一定范围
      rewardName = rewardName.substring(0,6)+"||"+rewardName.substring(6);
      var rewardNames = rewardName.split("||");
      for(var j = 0; j<rewardNames.length; j++){
        ctx.fillText(rewardNames[j], -ctx.measureText(rewardNames[j]).width / 2, j * line_height);
      }
    }else{
      //在画布上绘制填色的文本。文本的默认颜色是黑色
      ctx.fillText(rewardName, -ctx.measureText(rewardName).width / 2, 0);
    }

    //添加对应图标
    if(rewardName.indexOf("Q币")>0){
      // 注意,这里要等到img加载完成才能绘制
      imgQb.onload=function(){
        ctx.drawImage(imgQb,-15,10);
      };
      ctx.drawImage(imgQb,-15,10);

    }else if(rewardName.indexOf("谢谢参与")>=0){
      imgSorry.onload=function(){
        ctx.drawImage(imgSorry,-15,10);
      };
      ctx.drawImage(imgSorry,-15,10);
    }
    //还原画板的状态到上一个save()状态之前
    ctx.restore();

    /*----绘制奖品结束----*/

  }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注