You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

366 lines
9.0 KiB

<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<canvas class="canvas-element" canvas-id="canvas" id="canvas"></canvas>
<scroll-view class="canvas-buttons" scroll-y="true">
<block v-for="(name, index) in names" :key="index">
<button class="canvas-button" @click="handleCanvasButton(name)">{{name}}</button>
</block>
<button class="canvas-button" @click="toTempFilePath" type="primary">toTempFilePath</button>
</scroll-view>
</view>
</view>
</template>
<script>
var context = null;
export default {
data() {
return {
title: 'createContext',
names: ["rotate", "scale", "reset", "translate", "save", "restore", "drawImage", "fillText", "fill",
"stroke", "clearRect", "beginPath", "closePath", "moveTo", "lineTo", "rect", "arc",
"quadraticCurveTo", "bezierCurveTo", "setFillStyle", "setStrokeStyle", "setGlobalAlpha",
"setShadow", "setFontSize", "setLineCap", "setLineJoin", "setLineWidth", "setMiterLimit"
]
}
},
onReady: function() {
context = uni.createCanvasContext('canvas',this)
},
methods: {
toTempFilePath: function() {
uni.canvasToTempFilePath({
canvasId: 'canvas',
success: function(res) {
console.log(res.tempFilePath)
},
fail: function(err) {
console.error(JSON.stringify(err))
}
})
},
handleCanvasButton: function(name) {
this[name] && this[name]();
},
rotate: function() {
context.beginPath()
context.rotate(10 * Math.PI / 180)
context.rect(225, 75, 20, 10)
context.fill()
context.draw()
},
scale: function() {
context.beginPath()
context.rect(25, 25, 50, 50)
context.stroke()
context.scale(2, 2)
context.beginPath()
context.rect(25, 25, 50, 50)
context.stroke()
context.draw()
},
reset: function() {
context.beginPath()
context.setFillStyle('#000000')
context.setStrokeStyle('#000000')
context.setFontSize(10)
context.setGlobalAlpha(1)
context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)')
context.setLineCap('butt')
context.setLineJoin('miter')
context.setLineWidth(1)
context.setMiterLimit(10)
context.draw()
},
translate: function() {
context.beginPath()
context.rect(10, 10, 100, 50)
context.fill()
context.translate(70, 70)
context.beginPath()
context.fill()
context.draw()
},
save: function() {
context.beginPath()
context.setStrokeStyle('#00ff00')
context.save()
context.scale(2, 2)
context.setStrokeStyle('#ff0000')
context.rect(0, 0, 100, 100)
context.stroke()
context.restore()
context.rect(0, 0, 50, 50)
context.stroke()
context.draw()
},
restore: function() {
[3, 2, 1].forEach(function(item) {
context.beginPath()
context.save()
context.scale(item, item)
context.rect(10, 10, 100, 100)
context.stroke()
context.restore()
});
context.draw()
},
drawImage: function() {
// #ifdef APP-PLUS
context.drawImage('../../../static/app-plus/uni@2x.png', 0, 0)
// #endif
// #ifndef APP-PLUS
context.drawImage('../../../static/uni.png', 0, 0)
// #endif
context.draw()
},
fillText: function() {
context.setStrokeStyle('#ff0000')
context.beginPath()
context.moveTo(0, 10)
context.lineTo(300, 10)
context.stroke()
// context.save()
// context.scale(1.5, 1.5)
// context.translate(20, 20)
context.setFontSize(10)
context.fillText('Hello World', 0, 30)
context.setFontSize(20)
context.fillText('Hello World', 100, 30)
// context.restore()
context.beginPath()
context.moveTo(0, 30)
context.lineTo(300, 30)
context.stroke()
context.draw()
},
fill: function() {
context.beginPath()
context.rect(20, 20, 150, 100)
context.setStrokeStyle('#00ff00')
context.fill()
context.draw()
},
stroke: function() {
context.beginPath()
context.moveTo(20, 20)
context.lineTo(20, 100)
context.lineTo(70, 100)
context.setStrokeStyle('#00ff00')
context.stroke()
context.draw()
},
clearRect: function() {
context.setFillStyle('#ff0000')
context.beginPath()
context.rect(0, 0, 300, 150)
context.fill()
context.clearRect(20, 20, 100, 50)
context.draw()
},
beginPath: function() {
context.beginPath()
context.setLineWidth(5)
context.setStrokeStyle('#ff0000')
context.moveTo(0, 75)
context.lineTo(250, 75)
context.stroke()
context.beginPath()
context.setStrokeStyle('#0000ff')
context.moveTo(50, 0)
context.lineTo(150, 130)
context.stroke()
context.draw()
},
closePath: function() {
context.beginPath()
context.setLineWidth(1)
context.moveTo(20, 20)
context.lineTo(20, 100)
context.lineTo(70, 100)
context.closePath()
context.stroke()
context.draw()
},
moveTo: function() {
context.beginPath()
context.moveTo(0, 0)
context.lineTo(300, 150)
context.stroke()
context.draw()
},
lineTo: function() {
context.beginPath()
context.moveTo(20, 20)
context.lineTo(20, 100)
context.lineTo(70, 100)
context.stroke()
context.draw()
},
rect: function() {
context.beginPath()
context.rect(20, 20, 150, 100)
context.stroke()
context.draw()
},
arc: function() {
context.beginPath()
context.setLineWidth(2)
context.arc(75, 75, 50, 0, Math.PI * 2, true)
context.moveTo(110, 75)
context.arc(75, 75, 35, 0, Math.PI, false)
context.moveTo(65, 65)
context.arc(60, 65, 5, 0, Math.PI * 2, true)
context.moveTo(95, 65)
context.arc(90, 65, 5, 0, Math.PI * 2, true)
context.stroke()
context.draw()
},
quadraticCurveTo: function() {
context.beginPath()
context.moveTo(20, 20)
context.quadraticCurveTo(20, 100, 200, 20)
context.stroke()
context.draw()
},
bezierCurveTo: function() {
context.beginPath()
context.moveTo(20, 20)
context.bezierCurveTo(20, 100, 200, 100, 200, 20)
context.stroke()
context.draw()
},
setFillStyle: function() {
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function(item, index) {
context.setFillStyle(item)
context.beginPath()
context.rect(0 + 75 * index, 0, 50, 50)
context.fill()
})
context.draw()
},
setStrokeStyle: function() {
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function(item, index) {
context.setStrokeStyle(item)
context.beginPath()
context.rect(0 + 75 * index, 0, 50, 50)
context.stroke()
})
context.draw()
},
setGlobalAlpha: function() {
context.setFillStyle('#000000');
[1, 0.5, 0.1].forEach(function(item, index) {
context.setGlobalAlpha(item)
context.beginPath()
context.rect(0 + 75 * index, 0, 50, 50)
context.fill()
})
context.draw()
context.setGlobalAlpha(1)
},
setShadow: function() {
context.beginPath()
context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)')
context.rect(10, 10, 100, 100)
context.fill()
context.draw()
},
setFontSize: function() {
[10, 20, 30, 40].forEach(function(item, index) {
context.setFontSize(item)
context.fillText('Hello, world', 20, 20 + 40 * index)
})
context.draw()
},
setLineCap: function() {
context.setLineWidth(10);
['butt', 'round', 'square'].forEach(function(item, index) {
context.beginPath()
context.setLineCap(item)
context.moveTo(20, 20 + 20 * index)
context.lineTo(100, 20 + 20 * index)
context.stroke()
})
context.draw()
},
setLineJoin: function() {
context.setLineWidth(10);
['bevel', 'round', 'miter'].forEach(function(item, index) {
context.beginPath()
context.setLineJoin(item)
context.moveTo(20 + 80 * index, 20)
context.lineTo(100 + 80 * index, 50)
context.lineTo(20 + 80 * index, 100)
context.stroke()
})
context.draw()
},
setLineWidth: function() {
[2, 4, 6, 8, 10].forEach(function(item, index) {
context.beginPath()
context.setLineWidth(item)
context.moveTo(20, 20 + 20 * index)
context.lineTo(100, 20 + 20 * index)
context.stroke()
})
context.draw()
},
setMiterLimit: function() {
context.setLineWidth(4);
[2, 4, 6, 8, 10].forEach(function(item, index) {
context.beginPath()
context.setMiterLimit(item)
context.moveTo(20 + 80 * index, 20)
context.lineTo(100 + 80 * index, 50)
context.lineTo(20 + 80 * index, 100)
context.stroke()
})
context.draw()
}
}
}
</script>
<style>
.canvas-element-wrapper {
display: block;
margin-bottom: 100rpx;
}
.canvas-element {
width: 100%;
height: 500rpx;
background-color: #ffffff;
}
.canvas-buttons {
padding: 30rpx 50rpx 10rpx;
width: 100%;
height: 360rpx;
box-sizing: border-box;
}
.canvas-button {
float: left;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
line-height: 1;
width: 300rpx;
margin: 15rpx 12rpx;
}
</style>