| <template> |
| <div ref="test"> |
| <component :is="tagName" width="750" height="750" ref="canvas_holder" style="width:750px;height:750px;"></component> |
| </div> |
| </template> |
| <script> |
| |
| var GCanvas=require('weex-gcanvas'); |
| var Image=require('weex-gcanvas/gcanvasimage'); |
| |
| module.exports = { |
| data() { |
| return { |
| tagName: weex.config.env.platform === 'Web' ? 'canvas' : 'gcanvas' |
| } |
| }, |
| mounted: function () { |
| var ref = this.$refs.canvas_holder; |
| var gcanvas = GCanvas.start(ref) |
| var ctx = gcanvas.getContext('2d'); |
| |
| ctx.fillStyle = 'red'; |
| ctx.fillRect(0, 0, 100, 100); |
| |
| ctx.fillStyle = 'black'; |
| ctx.fillRect(100, 100, 100, 100); |
| ctx.fillRect(25, 210, 700, 5); |
| |
| ctx.arc(450, 200, 100, 0, Math.PI * 2, true); |
| ctx.fill(); |
| |
| var img = new Image(); |
| img.onload = function(){ |
| ctx.drawImage(img, 100, 200, 210, 330); |
| // ctx.drawImage(img, 0,0,105,165, 100, 200, 210, 330); |
| }; |
| img.src = 'https://img.alicdn.com/tps/TB1TFNdKVXXXXbeaXXXXXXXXXXX-210-330.png'; |
| } |
| }; |
| </script> |