imgCanvs.js
4.03 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
// const canvasRef = ref < HTMLCanvasElement > ()
// const ctx = ref < CanvasRenderingContext2D | null > ()
// const canvasWidth = 1000
// const canvasHeight = 500
// const rectWidth = 150
// const rectHeight = 60
// const deg = 60
// ctx.toBlob((res) => { })
// function getRotateParams(deg: number, width: number, height: number) {
// const x =
// (width / 2) * Math.cos((Math.PI * deg) / 180) +
// (height / 2) * Math.sin((Math.PI * deg) / 180) -
// width / 2
// const y =
// (Math.cos((Math.PI * deg) / 180) * height) / 2 -
// (Math.sin((Math.PI * deg) / 180) * width) / 2 -
// height / 2
// return {
// x,
// y
// }
// }
// function initCanvas() {
// if (canvasRef.value) {
// canvasRef.value.width = canvasWidth
// canvasRef.value.height = canvasHeight
// ctx.value = canvasRef.value.getContext('2d')
// }
// if (ctx.value) {
// ctx.value?.translate(200, 200)
// ctx.value?.rect(0, 0, rectWidth, rectHeight)
// ctx.value?.stroke()
// ctx.value?.beginPath()
// ctx.value?.moveTo(-200, rectHeight / 2)
// ctx.value?.lineTo(canvasWidth + 200, rectHeight / 2)
// ctx.value?.stroke()
// ctx.value?.beginPath()
// ctx.value?.moveTo(rectWidth / 2, -200)
// ctx.value?.lineTo(rectWidth / 2, canvasHeight - 200)
// ctx.value?.stroke()
// ctx.value?.rotate((deg * Math.PI) / 180)
// ctx.value?.rect(0, 0, rectWidth, rectHeight)
// ctx.value?.stroke()
// ctx.value?.beginPath()
// ctx.value?.moveTo(-200, rectHeight / 2)
// ctx.value?.lineTo(canvasWidth + 200, rectHeight / 2)
// ctx.value?.stroke()
// ctx.value?.beginPath()
// ctx.value?.moveTo(rectWidth / 2, -200)
// ctx.value?.lineTo(rectWidth / 2, canvasHeight - 200)
// ctx.value?.stroke()
// ctx.value?.beginPath()
// ctx.value?.moveTo(0, -200)
// ctx.value?.lineTo(0, canvasHeight - 200)
// ctx.value?.stroke()
// const { x, y } = getRotateParams(deg, rectWidth, rectHeight)
// ctx.value?.translate(x, y)
// ctx.value?.rect(0, 0, rectWidth, rectHeight)
// ctx.value?.stroke()
// ctx.value?.beginPath()
// ctx.value?.moveTo(rectWidth / 2, -200)
// ctx.value?.lineTo(rectWidth / 2, canvasHeight - 200)
// ctx.value?.stroke()
// ctx.value?.beginPath()
// ctx.value?.moveTo(-200, rectHeight / 2)
// ctx.value?.lineTo(canvasWidth + 200, rectHeight / 2)
// ctx.value?.stroke();
// const img = document.createElement('img')
// img.src = '/car.png'
// img.onload = () => {
// // const imgAspectRatio = img.height / img.width
// // const imgWidth = 200
// // const imgHeight = imgWidth * imgAspectRatio
// // ctx.value?.drawImage(
// // img,
// // (canvasWidth - imgWidth) / 2,
// // (canvasHeight - imgHeight) / 2,
// // imgWidth,
// // imgHeight
// // )
// // ctx.value?.rotate((deg * Math.PI) / 180)
// // const { x, y } = getRotateParams(deg, canvasWidth, canvasHeight)
// // ctx.value?.translate(x, y)
// // ctx.value?.drawImage(
// // img,
// // (canvasWidth - imgWidth) / 2,
// // (canvasHeight - imgHeight) / 2,
// // imgWidth,
// // imgHeight
// // )
// }
// }
// }
// // 0. 获取到页面上的 canvas 标签元素节点
// const canvasEle = document.querySelector('#canvas')
// // 1. 获取当前这个画布的工具箱
// const ctx = canvasEle.getContext('2d')
// // 2. 加载图片
// myImg.sec = './01小锋.png'
// // 准备一个加载完毕的事件
// myImg.onload = function () {
// console.log(this) // 这里的 this 就是这个图片的内容
// // 3. 插入到画布内
// ctx.drawImage(this, 100, 100, 236, 368)
// }