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');