jcanvas 使用 | 易学教程

jcanvas

是处理canvas操作的jquery插件官网

文字

  $("#canvas").drawText({
    text: 'Canvas is fun',
    fontFamily: 'cursive',
    fontSize: 40,
    x: 290,
    y: 150,
    fillStyle: 'lightblue',
    strokeStyle: 'blue',
    strokeWidth: 1
  });

画弧形

  $('#canvas').drawArc({
    fillStyle: 'black',
    x: 100, y: 100,
    radius: 50
  }).drawArc({
      fillStyle: '#36b',
      x: 300, y: 150,
      radius: 50
    });

画椭圆

  $('#canvas').drawEllipse({
    fillStyle: '#000',
    x: 200, y: 100,
    width: 200, height: 100})

旋转画布，x和y是旋转中心

  $('canvas').rotateCanvas({
    rotate: 45,
    x: 100, y: 100
    })

缩放图层

$('canvas').scaleCanvas({
  x: 100, y: 100,
  scaleX: 1.5, scaleY: 3
})
.drawArc({
  fillStyle: '#000',
  x: 100, y: 100,
  radius: 20
})
.restoreCanvas()

清理图层

 // 清理图层
 1 清理全部图层
 $('canvas').clearCanvas()
 // 2 清理部分
 .clearCanvas({
   x: 200, y: 100,
   width: 50,
   height: 50
 });

event 实现高亮效果


$('canvas').drawPolygon({
  layer: true,
  fillStyle: '#fff',
  strokeStyle: '#333',
  strokeWidth: 2,
  x: 160, y: 150,
  radius: 100,
  sides: 3,
  mouseover: function(layer) {
    $(this).animateLayer(layer, {
      fillStyle: '#c33'
    }, 500);
  },
  mouseout: function(layer) {
    $(this).animateLayer(layer, {
      fillStyle: '#fff'
    }, 500);
  },
});

图像对象可拖动

$('canvas')
.drawArc({
  layer: true,
  draggable: true,
  bringToFront: true,
  fillStyle: '#36c',
  x: 150, y: 150,
  radius: 50
})
.drawRect({
  layer: true,
  draggable: true,
  bringToFront: true,
  fillStyle: '#6c1',
  x: 100, y: 100,
  width: 100, height: 100
});

图层操作

// Create a rectangle layer
$('canvas').addLayer({
  type: 'rectangle',
  fillStyle: '#585',
  x: 100, y: 100,
  width: 100, height: 50
})
.drawLayers();

导出canvas图像

 $('canvas').getCanvasImage('png');
 $('canvas').getCanvasImage('jpeg');

来源：CSDN

作者：huahuadavids_

链接：https://blog.csdn.net/qq_29334605/article/details/104028560

标签

canvas

true