feat: canvas 更新
feat: 添加 canvas imageData feat: 完善 canvas api fix: canvas example api update: canvas fix: fillText feat: add createImage feat: drawImage createPattern 调整 feat: rotate update feat: color update feat: update canvas propmaster
wuzhihao
parent
b4cb3134af
commit
697515df27
|
|
@ -1,5 +1,14 @@
|
|||
const example = require('./example.js')
|
||||
|
||||
function randomHexColor() {
|
||||
var r = Math.floor(Math.random() * 256); //随机生成256以内r值
|
||||
var g = Math.floor(Math.random() * 256); //随机生成256以内g值
|
||||
var b = Math.floor(Math.random() * 256); //随机生成256以内b值
|
||||
var alpha = Math.random() * 0.4 + 0.6; //随机生成1以内a值
|
||||
return `rgba(${r},${g},${b},${alpha})`; //返回rgba(r,g,b,a)格式颜色
|
||||
|
||||
}
|
||||
|
||||
Page({
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
|
|
@ -8,53 +17,165 @@ Page({
|
|||
}
|
||||
},
|
||||
|
||||
log1(e) {
|
||||
console.log('ctx1:', e.type, e)
|
||||
},
|
||||
|
||||
log2(e) {
|
||||
console.log('ctx2:', e.type, e)
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.context = wx.createContext()
|
||||
console.log('wx.createContext', this.context);
|
||||
|
||||
const methods = Object.keys(example)
|
||||
console.log(methods);
|
||||
this.setData({
|
||||
methods
|
||||
})
|
||||
|
||||
// 旧获取 canvas 方式
|
||||
const ctx1 = wx.createCanvasContext('canvas1');
|
||||
console.log('ctx1', ctx1)
|
||||
|
||||
// 新获取 canvas 方式
|
||||
let ctx2
|
||||
let canvas2
|
||||
const query = wx.createSelectorQuery()
|
||||
query.select('#canvas2').fields({ node: true, size: true }).exec((res) => {
|
||||
canvas2 = res[0].node
|
||||
ctx2 = canvas2.getContext('2d')
|
||||
|
||||
// 可以设置 dpr 的值，绘制高分辨率的图
|
||||
const dpr = 1 || wx.getSystemInfoSync().pixelRatio
|
||||
canvas2.width = res[0].width * dpr
|
||||
canvas2.height = res[0].height * dpr
|
||||
console.log('ctx2', ctx2)
|
||||
})
|
||||
|
||||
// fino 基础库兼容新旧写法，两者均可获取到同样的 context
|
||||
// 当 canvas 带 native 时，表示用原生组件
|
||||
// 原生组件下，仅 putImageData 和 getImageData api 会有区别
|
||||
|
||||
const that = this
|
||||
methods.forEach(function (method) {
|
||||
that[method] = function () {
|
||||
// 写法1 官方文档有描述的写法， 微信基础库支持，我们不支持
|
||||
//
|
||||
console.log('call action', method)
|
||||
const ctx = wx.createCanvasContext('canvas');
|
||||
example[method](ctx)
|
||||
ctx.draw(false, (res) => { console.log(res) });
|
||||
const actions = that.context.getActions()
|
||||
console.log('that.context.getActions()', actions, ctx);
|
||||
|
||||
// 写法2 更旧版本的写法 微信支持，fino基础库不支持
|
||||
// wx.createContext 和 wx.drawCanvas 疑似已经被从官方基础库文档中移除，但是官方基础库依旧支持
|
||||
console.log("run:", method)
|
||||
let color = null
|
||||
if (method === 'setRandom') {
|
||||
color = randomHexColor()
|
||||
}
|
||||
example[method](ctx1, true, color)
|
||||
// 旧版需要调用 draw 接口
|
||||
ctx1.draw(true, (res) => { console.log('ctx1 draw finish:', res) });
|
||||
|
||||
// example[method](that.context)
|
||||
// const actions = that.context.getActions()
|
||||
// wx.drawCanvas({
|
||||
// canvasId: 'canvas',
|
||||
// actions
|
||||
// })
|
||||
|
||||
// 写法3 同层渲染的原生canvas 就没实现
|
||||
example[method](ctx2, false, color, canvas2)
|
||||
try {
|
||||
// 微信新的 canvas 没有 draw 方法，加个报错兼容
|
||||
ctx2.draw(true, (res) => { console.log('ctx2 draw finish:', res) })
|
||||
} catch (err) {
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
toTempFilePath() {
|
||||
wx.canvasToTempFilePath({
|
||||
canvasId: 'canvas',
|
||||
canvasId: 'canvas1',
|
||||
success(res) {
|
||||
console.log(res)
|
||||
console.log('canvas1', res)
|
||||
},
|
||||
|
||||
fail(res) {
|
||||
console.log(res)
|
||||
console.log('canvas1', res)
|
||||
}
|
||||
})
|
||||
|
||||
const query = wx.createSelectorQuery()
|
||||
query.select('#canvas2').fields({ node: true, size: true }).exec((res) => {
|
||||
const canvas = res[0].node
|
||||
|
||||
wx.canvasToTempFilePath({
|
||||
canvas,
|
||||
success(res) {
|
||||
console.log('canvas2', res)
|
||||
},
|
||||
|
||||
fail(res) {
|
||||
console.log('canvas2', res)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
imageData() {
|
||||
|
||||
// 旧版
|
||||
// 整一个绿色方块
|
||||
const arr = new Array(100 * 100 * 4);
|
||||
for (var i = 0; i < arr.length; i += 4) {
|
||||
arr[i + 0] = 0;
|
||||
arr[i + 1] = 255;
|
||||
arr[i + 2] = 0;
|
||||
arr[i + 3] = 255;
|
||||
}
|
||||
// 把绿色方块画到 0 0 坐标
|
||||
wx.canvasPutImageData({
|
||||
canvasId: 'canvas1',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
data: new Uint8ClampedArray(arr),
|
||||
success(res) {
|
||||
console.log(res)
|
||||
},
|
||||
fail: console.log
|
||||
})
|
||||
// 获取 0 0 坐标，100 * 100 的图
|
||||
wx.canvasGetImageData({
|
||||
canvasId: 'canvas1',
|
||||
x: 50,
|
||||
y: 50,
|
||||
width: 100,
|
||||
height: 100,
|
||||
success(res) {
|
||||
console.log(res)
|
||||
// 把获取到的，画到 200 0 坐标上
|
||||
// 会出现两个绿色方块
|
||||
wx.canvasPutImageData({
|
||||
canvasId: 'canvas1',
|
||||
x: 200,
|
||||
y: 0,
|
||||
width: 100,
|
||||
height: 100,
|
||||
data: res.data,
|
||||
success(res) {
|
||||
console.log(res)
|
||||
},
|
||||
fail: console.log
|
||||
})
|
||||
},
|
||||
fail: console.log
|
||||
})
|
||||
|
||||
|
||||
// 新版
|
||||
const query = wx.createSelectorQuery()
|
||||
query.select('#canvas2').fields({ node: true, size: true }).exec((res) => {
|
||||
const canvas = res[0].node
|
||||
const context = canvas.getContext('2d')
|
||||
// 一个绿色方块数据
|
||||
const imgData = context.createImageData(100, 100);
|
||||
for (var i = 0; i < imgData.data.length; i += 4) {
|
||||
imgData.data[i + 0] = 0;
|
||||
imgData.data[i + 1] = 255;
|
||||
imgData.data[i + 2] = 0;
|
||||
imgData.data[i + 3] = 255;
|
||||
}
|
||||
|
||||
context.putImageData(imgData, 0, 0, 20, 20, 100, 100)
|
||||
|
||||
const image = context.getImageData(50, 50, 100, 100)
|
||||
context.putImageData(image, 200, 0, 20, 20, 100, 100)
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,16 +2,47 @@
|
|||
<import src="../../common/foot.wxml" />
|
||||
|
||||
<view class="container">
|
||||
<template is="head" data="{{title: 'createContext'}}"/>
|
||||
<view>本demo使用官方文档中的CanvasContext的调用方式</view>
|
||||
<template is="head"
|
||||
data="{{title: 'createContext'}}" />
|
||||
<view class="page-body">
|
||||
<view class="page-section">
|
||||
<canvas class="canvas-element" canvas-id="canvas"></canvas>
|
||||
<scroll-view class="canvas-buttons" scroll-y="true">
|
||||
<button class="canvas-button" bindtap="toTempFilePath">toTempFilePath</button>
|
||||
<block wx:for="{{methods}}" wx:for-item="method">
|
||||
<button class="canvas-button" bindtap="{{method}}" >{{method}}</button>
|
||||
</block>
|
||||
<!-- 旧 canvas 写法 -->
|
||||
<canvas class="canvas-element"
|
||||
style="border: 1rpx solid green;"
|
||||
disable-scroll="{{true}}"
|
||||
bindtouchstart="log1"
|
||||
bindtouchmove="log1"
|
||||
bindtouchend="log1"
|
||||
bindtouchcancel="log1"
|
||||
bindlongtap="log1"
|
||||
binderror="log1"
|
||||
canvas-id="canvas1"></canvas>
|
||||
<!-- 新 canvas 写法 -->
|
||||
<canvas native
|
||||
class="canvas-element"
|
||||
style="border: 1rpx solid rosybrown;"
|
||||
id="canvas2"
|
||||
disable-scroll="{{true}}"
|
||||
bindtouchstart="log2"
|
||||
bindtouchmove="log2"
|
||||
bindtouchend="log2"
|
||||
bindtouchcancel="log2"
|
||||
bindlongtap="log2"
|
||||
binderror="log2"
|
||||
type="2d"></canvas>
|
||||
<scroll-view class="canvas-buttons"
|
||||
scroll-y="true">
|
||||
<view class="canvas-button-box">
|
||||
<button class="canvas-button"
|
||||
bindtap="toTempFilePath">toTempFilePath</button>
|
||||
<button class="canvas-button"
|
||||
bindtap="imageData">imageData</button>
|
||||
<block wx:for="{{methods}}"
|
||||
wx:for-item="method">
|
||||
<button class="canvas-button"
|
||||
bindtap="{{method}}">{{method}}</button>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -2,20 +2,32 @@
|
|||
display: block;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.canvas-element {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
height: 200px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.canvas-buttons {
|
||||
padding: 15px 25px 5px;
|
||||
width: 100%;
|
||||
height: 330px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.canvas-button {
|
||||
float: left;
|
||||
line-height: 2;
|
||||
width: 150px;
|
||||
margin: 8px 11px;
|
||||
|
||||
.canvas-buttons {
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.canvas-button-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.canvas-button {
|
||||
flex: 0 1 45% !important;
|
||||
width: 45% !important;
|
||||
line-height: 2;
|
||||
padding: 4rpx;
|
||||
margin: 0 4rpx 4rpx 0 !important;
|
||||
border: 1rpx solid #666;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,211 @@
|
|||
const example = {}
|
||||
|
||||
example.measureText = function (context) {
|
||||
example.setGreen = function (context, isOld) {
|
||||
example.setRandom(context, isOld, 'green')
|
||||
}
|
||||
|
||||
example.setRed = function (context, isOld) {
|
||||
example.setRandom(context, isOld, 'red')
|
||||
}
|
||||
|
||||
// 设置随机颜色
|
||||
example.setRandom = function (context, isOld, color) {
|
||||
if (isOld) {
|
||||
context.setFillStyle(color)
|
||||
context.setStrokeStyle(color)
|
||||
context.setFontSize(10)
|
||||
context.setShadow(10, 10, 30, color)
|
||||
context.setLineCap('butt')
|
||||
context.setLineJoin('miter')
|
||||
context.setLineWidth(1)
|
||||
context.setMiterLimit(10)
|
||||
} else {
|
||||
context.fillStyle = color
|
||||
context.strokeStyle = color
|
||||
context.fontSize = 10
|
||||
context.shadowColor = color
|
||||
context.shadowBlur = 30
|
||||
context.shadowOffsetX = 10
|
||||
context.shadowOffsetY = 10
|
||||
context.lineCap = 'butt'
|
||||
context.lineJoin = 'miter'
|
||||
context.lineWidth = 1
|
||||
context.miterLimit = 10
|
||||
}
|
||||
}
|
||||
|
||||
// 重置颜色
|
||||
example.reset = function (context, isOld) {
|
||||
context.beginPath()
|
||||
|
||||
if (isOld) {
|
||||
context.setFillStyle('#000000')
|
||||
context.setStrokeStyle('#000000')
|
||||
context.setFontSize(10)
|
||||
context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)')
|
||||
context.setLineCap('butt')
|
||||
context.setLineJoin('miter')
|
||||
context.setLineWidth(1)
|
||||
context.setMiterLimit(10)
|
||||
} else {
|
||||
context.fillStyle = '#000000'
|
||||
context.strokeStyle = '#000000'
|
||||
context.fontSize = 10
|
||||
context.shadowColor = 'rgba(0, 0, 0, 0)'
|
||||
context.shadowBlur = 0
|
||||
context.shadowOffsetX = 0
|
||||
context.shadowOffsetY = 0
|
||||
context.lineCap = 'butt'
|
||||
context.lineJoin = 'miter'
|
||||
context.lineWidth = 1
|
||||
context.miterLimit = 10
|
||||
}
|
||||
}
|
||||
|
||||
example.transform = function (context, isOld) {
|
||||
context.transform(1, 0, 0, 1, 30, 10)
|
||||
}
|
||||
|
||||
example.measureText = function (context, isOld) {
|
||||
const data = context.measureText('123')
|
||||
console.log(`width: ${data.width}`)
|
||||
}
|
||||
|
||||
example.rotate = function (context) {
|
||||
example.arc = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.rotate(10 * Math.PI / 180)
|
||||
context.rect(225, 75, 20, 10)
|
||||
context.fill()
|
||||
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()
|
||||
}
|
||||
|
||||
example.scale = function (context) {
|
||||
example.arcTo = function (context, isOld) {
|
||||
context.beginPath();
|
||||
context.moveTo(20, 20); // 创建开始点
|
||||
context.lineTo(100, 20); // 创建水平线
|
||||
context.arcTo(150, 20, 150, 70, 50); // 创建弧
|
||||
context.lineTo(150, 120);
|
||||
context.arcTo(200, 120, 200, 170, 20); // 创建弧
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
example.beginPath = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.moveTo(20, 75)
|
||||
context.lineTo(250, 75)
|
||||
context.stroke()
|
||||
|
||||
context.beginPath()
|
||||
context.moveTo(50, 20)
|
||||
context.lineTo(150, 130)
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.bezierCurveTo = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.moveTo(20, 20)
|
||||
context.bezierCurveTo(20, 100, 200, 100, 200, 20)
|
||||
context.stroke()
|
||||
context.beginPath()
|
||||
context.moveTo(60, 60)
|
||||
context.bezierCurveTo(60, 100, 200, 100, 200, 60)
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.clearRect = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.rect(0, 0, 300, 150)
|
||||
context.fill()
|
||||
context.clearRect(20, 20, 100, 50)
|
||||
}
|
||||
|
||||
example.clip = function (context, isOld) {
|
||||
// 剪切矩形区域
|
||||
context.rect(50, 20, 200, 120)
|
||||
context.stroke()
|
||||
context.clip()
|
||||
context.fillRect(0, 0, 150, 100)
|
||||
}
|
||||
|
||||
example.closePath = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.moveTo(20, 20)
|
||||
context.lineTo(20, 100)
|
||||
context.lineTo(70, 100)
|
||||
context.closePath()
|
||||
context.stroke()
|
||||
|
||||
context.beginPath()
|
||||
context.moveTo(100, 100)
|
||||
context.lineTo(120, 120)
|
||||
context.lineTo(100, 200)
|
||||
context.closePath()
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.rotate = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.rotate(10 * Math.PI / 180)
|
||||
context.rect(225, 75, 50, 50)
|
||||
context.fill()
|
||||
context.strokeStyle = 'red'
|
||||
context.rect(225, 75, 50, 50)
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.createCircularGradient = function (context, isOld) {
|
||||
if (isOld) {
|
||||
const grd = context.createCircularGradient(75, 50, 50)
|
||||
grd.addColorStop(0, 'red')
|
||||
grd.addColorStop(1, 'green')
|
||||
context.setFillStyle(grd)
|
||||
context.fillRect(10, 10, 150, 80)
|
||||
context.draw()
|
||||
} else {
|
||||
const grd = context.createRadialGradient(75, 50, 5, 20, 20, 20);
|
||||
grd.addColorStop(0, "red")
|
||||
grd.addColorStop(1, "green")
|
||||
context.fillStyle = grd
|
||||
context.fillRect(10, 10, 150, 80)
|
||||
}
|
||||
}
|
||||
|
||||
example.createLinearGradient = function (context, isOld) {
|
||||
const grd = context.createLinearGradient(0, 0, 170, 0)
|
||||
grd.addColorStop(0, "black")
|
||||
grd.addColorStop(1, "white")
|
||||
if (isOld) {
|
||||
context.setFillStyle(grd)
|
||||
} else {
|
||||
context.fillStyle = grd
|
||||
}
|
||||
context.fillRect(20, 20, 150, 100)
|
||||
}
|
||||
|
||||
example.createPattern = function (context, isOld, color, canvas) {
|
||||
if (isOld) {
|
||||
const pat = context.createPattern('../../../image/icon_cloud_HL.png', "repeat")
|
||||
context.setFillStyle(pat)
|
||||
context.rect(0, 0, 150, 100)
|
||||
context.fill()
|
||||
} else {
|
||||
const img = canvas.createImage()
|
||||
img.onload = () => {
|
||||
const pat = context.createPattern(img, "repeat")
|
||||
context.fillStyle = pat
|
||||
context.rect(0, 0, 150, 100)
|
||||
context.fill()
|
||||
}
|
||||
img.src = '../../../image/icon_cloud_HL.png'
|
||||
}
|
||||
}
|
||||
|
||||
example.scale = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.rect(25, 25, 50, 50)
|
||||
context.stroke()
|
||||
|
|
@ -22,50 +215,58 @@ example.scale = function (context) {
|
|||
context.beginPath()
|
||||
context.rect(25, 25, 50, 50)
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.reset = function (context) {
|
||||
|
||||
context.scale(3, 3)
|
||||
context.beginPath()
|
||||
context.rect(40, 40, 50, 50)
|
||||
context.stroke()
|
||||
|
||||
context.setFillStyle('#000000')
|
||||
context.setStrokeStyle('#000000')
|
||||
context.setFontSize(10)
|
||||
|
||||
context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)')
|
||||
context.scale(1, 1)
|
||||
|
||||
context.setLineCap('butt')
|
||||
context.setLineJoin('miter')
|
||||
context.setLineWidth(1)
|
||||
context.setMiterLimit(10)
|
||||
}
|
||||
|
||||
example.translate = function (context) {
|
||||
example.translate = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.rect(10, 10, 100, 50)
|
||||
context.fill()
|
||||
|
||||
context.translate(70, 70)
|
||||
context.beginPath()
|
||||
context.fill()
|
||||
|
||||
context.translate(120, 120)
|
||||
|
||||
context.beginPath()
|
||||
context.fill()
|
||||
}
|
||||
|
||||
example.save = function (context) {
|
||||
example.save = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.setStrokeStyle('#00ff00')
|
||||
if (isOld) {
|
||||
context.setStrokeStyle('#00ff00')
|
||||
} else {
|
||||
context.strokeStyle = '#00ff00'
|
||||
}
|
||||
context.save()
|
||||
|
||||
context.scale(2, 2)
|
||||
context.setStrokeStyle('#ff0000')
|
||||
if (isOld) {
|
||||
context.setStrokeStyle('#ff0000')
|
||||
} else {
|
||||
context.strokeStyle = '#ff0000'
|
||||
}
|
||||
context.rect(0, 0, 100, 100)
|
||||
context.stroke()
|
||||
context.restore()
|
||||
|
||||
context.rect(0, 0, 50, 50)
|
||||
context.stroke()
|
||||
context.scale(1, 1)
|
||||
}
|
||||
|
||||
example.restore = function (context) {
|
||||
example.restore = function (context, isOld) {
|
||||
[3, 2, 1].forEach(function (item) {
|
||||
context.beginPath()
|
||||
context.save()
|
||||
|
|
@ -76,27 +277,37 @@ example.restore = function (context) {
|
|||
})
|
||||
}
|
||||
|
||||
example.drawImage = function (context) {
|
||||
context.drawImage('/image/wechat.png', 0, 0)
|
||||
example.drawImage = function (context, isOld, color, canvas) {
|
||||
if (isOld) {
|
||||
context.drawImage('/image/wechat.png', 0, 0)
|
||||
} else {
|
||||
const img = canvas.createImage()
|
||||
img.onload = () => {
|
||||
context.drawImage(img, 0, 0)
|
||||
}
|
||||
img.src = '/image/wechat.png'
|
||||
}
|
||||
}
|
||||
|
||||
example.fillText = function (context) {
|
||||
context.setStrokeStyle('#ff0000')
|
||||
|
||||
example.fillText = function (context, isOld) {
|
||||
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()
|
||||
if (isOld) {
|
||||
context.setFontSize(10)
|
||||
} else {
|
||||
context.font = '10px arial'
|
||||
}
|
||||
context.fillText('Hello World', 0, 30)
|
||||
if (isOld) {
|
||||
context.setFontSize(20)
|
||||
} else {
|
||||
context.font = '20px arial'
|
||||
}
|
||||
context.fillText('Hello World', 100, 30)
|
||||
|
||||
context.beginPath()
|
||||
context.moveTo(0, 30)
|
||||
|
|
@ -104,160 +315,281 @@ example.fillText = function (context) {
|
|||
context.stroke()
|
||||
}
|
||||
|
||||
example.fill = function (context) {
|
||||
example.fill = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.rect(20, 20, 150, 100)
|
||||
context.setStrokeStyle('#00ff00')
|
||||
context.fill()
|
||||
}
|
||||
|
||||
example.stroke = function (context) {
|
||||
example.stroke = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.moveTo(20, 20)
|
||||
context.lineTo(20, 100)
|
||||
context.lineTo(70, 100)
|
||||
context.setStrokeStyle('#00ff00')
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.clearRect = function (context) {
|
||||
context.setFillStyle('#ff0000')
|
||||
context.beginPath()
|
||||
context.rect(0, 0, 300, 150)
|
||||
context.fill()
|
||||
context.clearRect(20, 20, 100, 50)
|
||||
example.strokeRect = function (context, isOld) {
|
||||
context.strokeRect(20, 20, 150, 100)
|
||||
context.strokeRect(160, 180, 200, 200)
|
||||
}
|
||||
|
||||
example.beginPath = function (context) {
|
||||
context.beginPath()
|
||||
context.setLineWidth(5)
|
||||
context.setStrokeStyle('#ff0000')
|
||||
context.moveTo(0, 75)
|
||||
context.lineTo(250, 75)
|
||||
context.stroke()
|
||||
example.strokeText = function (context, isOld) {
|
||||
context.font = "20px arial"
|
||||
context.strokeText("Hello World!", 10, 50)
|
||||
|
||||
context.beginPath()
|
||||
context.setStrokeStyle('#0000ff')
|
||||
context.moveTo(50, 0)
|
||||
context.lineTo(150, 130)
|
||||
context.stroke()
|
||||
context.font = "30px arial"
|
||||
// 创建渐变
|
||||
const gradient = context.createLinearGradient(0, 0, 200, 0)
|
||||
gradient.addColorStop("0", "magenta")
|
||||
gradient.addColorStop("0.5", "blue")
|
||||
gradient.addColorStop("1.0", "red")
|
||||
// 用渐变填色
|
||||
if (isOld) {
|
||||
context.setStrokeStyle(gradient)
|
||||
} else {
|
||||
context.strokeStyle = gradient
|
||||
}
|
||||
context.strokeText("finclip", 10, 90)
|
||||
}
|
||||
|
||||
example.closePath = function (context) {
|
||||
context.beginPath()
|
||||
context.moveTo(20, 20)
|
||||
context.lineTo(20, 100)
|
||||
context.lineTo(70, 100)
|
||||
context.closePath()
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.moveTo = function (context) {
|
||||
example.moveTo = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.moveTo(0, 0)
|
||||
context.lineTo(300, 150)
|
||||
context.stroke()
|
||||
|
||||
context.beginPath()
|
||||
context.moveTo(40, 40)
|
||||
context.lineTo(200, 180)
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.lineTo = function (context) {
|
||||
example.lineTo = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.moveTo(20, 20)
|
||||
context.lineTo(20, 100)
|
||||
context.lineTo(70, 100)
|
||||
context.stroke()
|
||||
|
||||
context.beginPath()
|
||||
context.moveTo(40, 40)
|
||||
context.lineTo(200, 180)
|
||||
context.lineTo(70, 100)
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.rect = function (context) {
|
||||
example.rect = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.rect(20, 20, 150, 100)
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.arc = function (context) {
|
||||
context.beginPath()
|
||||
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.rect(40, 40, 180, 100)
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.quadraticCurveTo = function (context) {
|
||||
example.quadraticCurveTo = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.moveTo(20, 20)
|
||||
context.quadraticCurveTo(20, 100, 200, 20)
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.bezierCurveTo = function (context) {
|
||||
context.beginPath()
|
||||
context.moveTo(20, 20)
|
||||
context.bezierCurveTo(20, 100, 200, 100, 200, 20)
|
||||
context.moveTo(60, 60)
|
||||
context.quadraticCurveTo(30, 130, 200, 20)
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.setFillStyle = function (context) {
|
||||
example.setFillStyle = function (context, isOld) {
|
||||
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
|
||||
context.setFillStyle(item)
|
||||
if (isOld) {
|
||||
context.setFillStyle(item)
|
||||
} else {
|
||||
context.fillStyle = item
|
||||
}
|
||||
context.beginPath()
|
||||
context.rect(0 + 75 * index, 0, 50, 50)
|
||||
context.fill()
|
||||
})
|
||||
}
|
||||
|
||||
example.setStrokeStyle = function (context) {
|
||||
example.setStrokeStyle = function (context, isOld) {
|
||||
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
|
||||
context.setStrokeStyle(item)
|
||||
if (isOld) {
|
||||
context.setStrokeStyle(item)
|
||||
} else {
|
||||
context.strokeStyle = item
|
||||
}
|
||||
context.beginPath()
|
||||
context.rect(0 + 75 * index, 0, 50, 50)
|
||||
context.stroke()
|
||||
})
|
||||
}
|
||||
|
||||
example.setGlobalAlpha = function (context) {
|
||||
context.setFillStyle('#000000');
|
||||
|
||||
example.setTextAlign = function (context, isOld) {
|
||||
// 在位置 150 创建蓝线
|
||||
function setTextAlign(text) {
|
||||
if (isOld) {
|
||||
context.setTextAlign(text)
|
||||
} else {
|
||||
context.textAlign = text
|
||||
}
|
||||
}
|
||||
context.moveTo(150, 20)
|
||||
context.lineTo(150, 170)
|
||||
context.stroke()
|
||||
|
||||
context.font = "15px Arial"
|
||||
|
||||
// 显示不同的 textAlign 值
|
||||
setTextAlign("start")
|
||||
context.fillText("textAlign=start", 150, 60)
|
||||
setTextAlign("end")
|
||||
context.fillText("textAlign=end", 150, 80)
|
||||
setTextAlign("left")
|
||||
context.fillText("textAlign=left", 150, 100)
|
||||
setTextAlign("center")
|
||||
context.fillText("textAlign=center", 150, 120)
|
||||
setTextAlign("right")
|
||||
context.fillText("textAlign=right", 150, 140)
|
||||
}
|
||||
|
||||
example.setTextBaseline = function (context, isOld) {
|
||||
// 在位置 150 创建蓝线
|
||||
|
||||
function setTextBaseline(text) {
|
||||
if (isOld) {
|
||||
context.setTextBaseline(text)
|
||||
} else {
|
||||
context.textBaseline = text
|
||||
}
|
||||
}
|
||||
context.moveTo(5, 100)
|
||||
context.lineTo(395, 100)
|
||||
context.stroke()
|
||||
|
||||
context.font = "20px Arial"
|
||||
|
||||
// 显示不同的 textAlign 值
|
||||
setTextBaseline("top")
|
||||
context.fillText("Top", 5, 100)
|
||||
setTextBaseline("bottom")
|
||||
context.fillText("Bottom", 50, 100)
|
||||
setTextBaseline("middle")
|
||||
context.fillText("Middle", 120, 100)
|
||||
setTextBaseline("alphabetic")
|
||||
context.fillText("Alphabetic", 190, 100)
|
||||
setTextBaseline("hanging")
|
||||
context.fillText("Hanging", 290, 100)
|
||||
}
|
||||
|
||||
example.setTransform = function (context, isOld) {
|
||||
// 在位置 150 创建蓝线
|
||||
|
||||
context.fillRect(0, 0, 250, 100)
|
||||
|
||||
context.setTransform(1, 0.5, -0.5, 1, 30, 10)
|
||||
if (isOld) {
|
||||
context.setFillStyle('red')
|
||||
} else {
|
||||
context.fillStyle = 'red'
|
||||
}
|
||||
context.fillRect(0, 0, 250, 100);
|
||||
|
||||
context.setTransform(1, 0.5, -0.5, 1, 30, 10)
|
||||
if (isOld) {
|
||||
context.setFillStyle('blue')
|
||||
} else {
|
||||
context.fillStyle = 'blue'
|
||||
}
|
||||
context.fillRect(0, 0, 250, 100)
|
||||
}
|
||||
|
||||
example.setGlobalAlpha = function (context, isOld) {
|
||||
[1, 0.5, 0.1].forEach(function (item, index) {
|
||||
context.setGlobalAlpha(item)
|
||||
try {
|
||||
context.setGlobalAlpha(item)
|
||||
} catch (e) {
|
||||
context.globalAlpha = item
|
||||
}
|
||||
context.beginPath()
|
||||
context.rect(0 + 75 * index, 0, 50, 50)
|
||||
context.fill()
|
||||
})
|
||||
}
|
||||
|
||||
example.setShadow = function (context) {
|
||||
example.setShadow = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)')
|
||||
context.rect(10, 10, 100, 100)
|
||||
context.fill()
|
||||
|
||||
context.beginPath()
|
||||
context.rect(50, 50, 100, 100)
|
||||
context.fill()
|
||||
}
|
||||
|
||||
example.setFontSize = function (context) {
|
||||
example.setFontSize = function (context, isOld) {
|
||||
[10, 20, 30, 40].forEach(function (item, index) {
|
||||
context.setFontSize(item)
|
||||
if (isOld) {
|
||||
context.setFontSize(item)
|
||||
} else {
|
||||
context.font = item + 'px arial'
|
||||
}
|
||||
context.fillText('Hello, world', 20, 20 + 40 * index)
|
||||
})
|
||||
}
|
||||
|
||||
example.setLineCap = function (context) {
|
||||
context.setLineWidth(10);
|
||||
example.setLineCap = function (context, isOld) {
|
||||
context.setLineWidth(10)
|
||||
if (isOld) {
|
||||
context.setLineWidth(10)
|
||||
} else {
|
||||
context.lineWidth = 10
|
||||
}
|
||||
['butt', 'round', 'square'].forEach(function (item, index) {
|
||||
context.beginPath()
|
||||
context.setLineCap(item)
|
||||
if (isOld) {
|
||||
context.setLineCap(item)
|
||||
} else {
|
||||
context.lineCap = item
|
||||
}
|
||||
context.moveTo(20, 20 + 20 * index)
|
||||
context.lineTo(100, 20 + 20 * index)
|
||||
context.stroke()
|
||||
})
|
||||
}
|
||||
|
||||
example.setLineJoin = function (context) {
|
||||
context.setLineWidth(10);
|
||||
example.setLineDash = function (context, isOld) {
|
||||
context.beginPath()
|
||||
context.setLineDash([5, 15])
|
||||
context.moveTo(0, 50)
|
||||
context.lineTo(300, 50)
|
||||
context.stroke()
|
||||
|
||||
// Solid line
|
||||
context.beginPath()
|
||||
context.setLineDash([])
|
||||
context.moveTo(0, 100)
|
||||
context.lineTo(300, 100)
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
example.setLineJoin = function (context, isOld) {
|
||||
if (isOld) {
|
||||
context.setLineWidth(10)
|
||||
} else {
|
||||
context.lineWidth = 10
|
||||
}
|
||||
['bevel', 'round', 'miter'].forEach(function (item, index) {
|
||||
context.beginPath()
|
||||
|
||||
context.setLineJoin(item)
|
||||
if (isOld) {
|
||||
context.setLineJoin(item)
|
||||
} else {
|
||||
context.lineJoin = item
|
||||
}
|
||||
context.moveTo(20 + 80 * index, 20)
|
||||
context.lineTo(100 + 80 * index, 50)
|
||||
context.lineTo(20 + 80 * index, 100)
|
||||
|
|
@ -265,22 +597,34 @@ example.setLineJoin = function (context) {
|
|||
})
|
||||
}
|
||||
|
||||
example.setLineWidth = function (context) {
|
||||
example.setLineWidth = function (context, isOld) {
|
||||
[2, 4, 6, 8, 10].forEach(function (item, index) {
|
||||
context.beginPath()
|
||||
context.setLineWidth(item)
|
||||
if (isOld) {
|
||||
context.setLineWidth(item)
|
||||
} else {
|
||||
context.lineWidth = item
|
||||
}
|
||||
context.moveTo(20, 20 + 20 * index)
|
||||
context.lineTo(100, 20 + 20 * index)
|
||||
context.stroke()
|
||||
})
|
||||
}
|
||||
|
||||
example.setMiterLimit = function (context) {
|
||||
context.setLineWidth(4);
|
||||
example.setMiterLimit = function (context, isOld) {
|
||||
|
||||
if (isOld) {
|
||||
context.setLineWidth(4)
|
||||
} else {
|
||||
context.lineWidth = 4
|
||||
}
|
||||
[2, 4, 6, 8, 10].forEach(function (item, index) {
|
||||
context.beginPath()
|
||||
context.setMiterLimit(item)
|
||||
if (isOld) {
|
||||
context.setMiterLimit(item)
|
||||
} else {
|
||||
context.miterLimit = item
|
||||
}
|
||||
context.moveTo(20 + 80 * index, 20)
|
||||
context.lineTo(100 + 80 * index, 50)
|
||||
context.lineTo(20 + 80 * index, 100)
|
||||
|
|
@ -288,4 +632,67 @@ example.setMiterLimit = function (context) {
|
|||
})
|
||||
}
|
||||
|
||||
example.globalCompositeOperation = function (context, isOld) {
|
||||
if (isOld) {
|
||||
context.setFillStyle('red')
|
||||
} else {
|
||||
context.fillStyle = 'red'
|
||||
}
|
||||
context.fillRect(20, 20, 75, 50)
|
||||
context.globalCompositeOperation = "source-over"
|
||||
if (isOld) {
|
||||
context.setFillStyle('blue')
|
||||
} else {
|
||||
context.fillStyle = 'blue'
|
||||
}
|
||||
context.fillRect(50, 50, 75, 50)
|
||||
|
||||
if (isOld) {
|
||||
context.setFillStyle('red')
|
||||
} else {
|
||||
context.fillStyle = 'red'
|
||||
}
|
||||
context.fillRect(150, 20, 75, 50)
|
||||
context.globalCompositeOperation = "destination-over"
|
||||
if (isOld) {
|
||||
context.setFillStyle('blue')
|
||||
} else {
|
||||
context.fillStyle = 'blue'
|
||||
}
|
||||
context.fillRect(180, 50, 75, 50)
|
||||
}
|
||||
|
||||
example.createImage = function (context, isOld, color, canvas) {
|
||||
if (isOld) {
|
||||
context.fillText('createImage 不会生效', 20, 20)
|
||||
} else {
|
||||
// 本地路径 1
|
||||
const img = canvas.createImage()
|
||||
img.src = '../../../image/wechat.png'
|
||||
img.onload = () => {
|
||||
context.drawImage(img, 0, 0, 100, 100)
|
||||
}
|
||||
|
||||
wx.getImageInfo({
|
||||
src: 'http://img.daimg.com/uploads/allimg/210526/3-2105261P1490-L.jpg',
|
||||
success(res) {
|
||||
const img = canvas.createImage()
|
||||
img.src = res.path
|
||||
// finfile
|
||||
img.onload = () => {
|
||||
context.drawImage(img, 120, 0, 100, 100)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 网络路径
|
||||
const img2 = canvas.createImage()
|
||||
img2.src = 'http://img.daimg.com/uploads/allimg/211113/3-2111131612510-L.jpg'
|
||||
img2.onload = () => {
|
||||
context.drawImage(img2, 240, 0, 100, 100)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = example
|
||||
|
|
|
|||
|
|
@ -2,32 +2,35 @@
|
|||
<import src="../../common/foot.wxml" />
|
||||
|
||||
<view class="container">
|
||||
<template is="head" data="{{title: 'canvas'}}"/>
|
||||
<template is="head"
|
||||
data="{{title: 'canvas'}}" />
|
||||
|
||||
<view class="page-body">
|
||||
<view class="page-section page-section-gap">
|
||||
<view class="page-section-title">绘制</view>
|
||||
<view class="body-view">
|
||||
<canvas canvas-id="canvas" class="canvas"></canvas>
|
||||
<canvas canvas-id="canvas"
|
||||
class="canvas"></canvas>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-section page-section-gap">
|
||||
<view class="page-section-title">绘制图片</view>
|
||||
<view class="body-view">
|
||||
<canvas canvas-id="canvas2" class="canvas"></canvas>
|
||||
<canvas canvas-id="canvas2"
|
||||
class="canvas"></canvas>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-section page-section-gap">
|
||||
<view class="page-section-title">绘制图片-高清</view>
|
||||
<view class="body-view">
|
||||
<canvas canvas-id="canvas3" class="canvas" hidpi></canvas>
|
||||
<canvas canvas-id="canvas3"
|
||||
class="canvas"
|
||||
hidpi></canvas>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template is="foot" />
|
||||
</view>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue