1.this.canvas.getContext(‘2d’)
Initialize the canvas
// Get the Canvas element
this.canvas = document.getElementById('tutorial')
// Get the drawing context
this.ctx = this.canvas.getContext('2d')
Copy the code2. This. CTX moveTo, enclosing CTX. LineTo (150, 50)
MoveTo moves the brush to a specific position, lineTo draws a lineTo a specific position
this.ctx.moveTo(50.150) // Move the brush to 50,150
this.ctx.lineTo(150.50)
Copy the code3. This. CTX storkeStyle, enclosing CTX. Stroke ()
Canvas storkeStyle: Canvas storkeStyle: Canvas storkeStyle: Canvas storkeStyle
this.ctx.storkeStyle = '# 000' / / black
this.ctx.storkeStyle = '# 000'/ / black
this.ctx.storkeStyle= 'rgba (255255255,1.0)' / / red
this.ctx.storke()
Copy the code4. This. CTX. FillStyle enclosing CTX. The fill ()
The canvas fillStyle is set by calling the fill method to create a canvas fillStyle.
this.ctx.fillStyle = '# 000' //
this.ctx.fillStyle = '# 000'//
this.ctx.fillStyle= 'rgba (255255255,1.0)'
this.ctx.fill()
Copy the code5. This. CTX. FillRect (), enclosing CTX. StorkeRect ()
FillReac draws a fill matrix and storkeReac draws a stroke matrix
this.ctx.fillStyle = '# 000' //
this.ctx.strokeStyle = '#ff00ff'//
this.ctx.fillStyle= 'rgba (255255255,1.0)'
this.ctx.fillRect(10.10.40.40)
this.ctx.storkeRect(0.0.60.60)
Copy the code5. This. CTX. BeginPath (), enclosing CTX. ClosePath ()
BeginPath Begins a path closePath Ends a path
This article about beginPath closePath has a detailed introduction to www.cnblogs.com/xuehaoyue/p…
6. This.ctx.linecap (), this.ctx.linejoin (), this.ctx.linewidth ()
LineCap sets the style of the end of the line. LineJoin sets the style of the join point of the line. LineWidth lineWidth
this.ctx.lineCap = 'butt' // Flat edges
this.ctx.lineCap = 'round' // The end is a semicircle
this.ctx.lineCap = 'square' // Add a rectangle with half of the line width at the end
this.ctx.lineCap = 'miter' / / the default value
this.ctx.lineCap = 'bevel' // The joint is the opposite bevel
this.ctx.lineCap = 'round' // Is the circular connection
this.ctx.lineWidth = '10' // Flat edges
Copy the code // Start drawing the graph
this.ctx.lineCap = 'butt'
this.ctx.lineJoin = 'miter'
this.ctx.lineWidth = '100'
this.ctx.moveTo(50.150)
this.ctx.lineTo(150.50)
this.ctx.lineTo(250.100)
this.ctx.stroke()
Copy the code7.this.ctx.arc() ,this.ctx.bezierCurveTo() ,this.ctx.quadraticCurveTo()
The arc draws the arc curve, the quadratic curve, the square bezier curve
// Start drawing the graph
this.ctx.arc(50.50.200.0*Math.PI/180.360*Math.PI/180.true)
this.ctx.bezierCurveTo(50.150.300.175.150.300)
this.ctx.quadraticCurveTo(50.150.300.175)
Copy the code8.this.ctx.clip()
Clip cutting
// Set a clipping area on the canvas. Name the next thing you draw. You can only see it in the clipping area
this.ctx.beginPath()
this.ctx.rect(0.0.50.50)
this.ctx.clip()
Copy the code9.this.ctx.rotate() this.ctx.translate() this.ctx.setTransform() this.ctx.scale()
Rotate Translate translate setTransform The canvas changes take effect only when this function is called. Scale scales
// Canvas deformation
this.ctx.setTransform() // Define the canvas deformable
let degree = (10 * Math.PI) / 180 // Z rotation Angle
let x = 10
let y = 10
this.ctx.scale(2.2) / / zoom
this.ctx.rotate(degree) / / rotation
this.ctx.translate(20.20) / / translation
this.ctx.fillStyle = 'red'
this.ctx.fillRect(50.50, x, y)
Copy the code10.this.ctx.createLinearGradient() this.ctx.createRadialGradient()
CreateLinearGradient Level gradient createRadialGradient Image gradient
this.ctx.beginPath()
// One and two parameters represent the starting position of the gradient, and three and four parameters represent the horizontal and vertical positions
let gr = this.ctx.createLinearGradient(0.0.100.100) // Initialize the gradient
gr.addColorStop(0.'rgb(255, 0, 0)') // Initial position
gr.addColorStop(0.5.'rgb(0, 255, 0)') // Intermediate position
gr.addColorStop(1.'rgb(255, 0, 0)') // End position
this.ctx.fillStyle = gr
this.ctx.fillRect(0.0.100.100)
this.ctx.closePath()
this.ctx.beginPath()
// Represents the first circle 150 150 radius 10 and the second circle 150 150 radius 50
let grw = this.ctx.createRadialGradient(150.150.10.150.150.50) // Initialize the gradient
grw.addColorStop(0.'rgb(255, 0, 0)') // Initial position
grw.addColorStop(0.5.'rgb(0, 255, 0)') // Intermediate position
grw.addColorStop(1.'rgb(255, 0, 0)') // End position
this.ctx.fillStyle = grw
this.ctx.fillRect(100.100.100.100)
this.ctx.closePath()
Copy the code11.this.ctx.clearRect()
ClearRect Clears the canvas
// Clear the canvas starting position,, length, width
this.ctx.clearRect(0.0.400.400)
Copy the code12.this.ctx.isPointInPath()
IsPointInPath Checks whether a point is in the current path
let a = ctx3.isPointInPath(250.100)
let b = ctx3.isPointInPath(150.100)
Copy the code13.this.ctx.drawImage() this.ctx.createImageData() this.ctx.getImageData() this.ctx.putImageData()
DrawImage reads the image and draws it to the canvas createImageData creates an image data getImageData retrieves the image information from the canvas putImageData retrieves the image information from the canvas and draws it back to the canvas
Let’s use the above apis for image filters
import images from '.. /.. /assets/image/123.jpg'
export default {
name: 'HTML5canvas'.data() {
return {
canvas: null.ctx: null.images: new Image()
}
},
mounted() {
// Get the Canvas element
this.canvas = document.getElementById('canvas')
// Get the drawing context
this.ctx = this.canvas.getContext('2d')},methods: {
clearCanvas(){
this.ctx.clearRect(0.0.1500.500)
},
fillfz () {
this.images.src = images
this.images.onload = () = > {
this.ctx.drawImage(this.images, 80.80.200.200)
}
},
fillhb () {
let imagedata = this.ctx.getImageData(80.80.200.200)
let data = imagedata.data
for(var i = 0; i< data.length; i+=4) {var average = (data[i+0]+data[i+1]+data[i+2]+data[i+3) /3
data[i+0] = average
data[i+1] = average
data[i+2] = average
}
this.ctx.putImageData(imagedata, 300.80)},fillfx() {
let imagedata = this.ctx.getImageData(80.80.200.200)
let data = imagedata.data
for(var i = 0; i< data.length; i+=4){
data[i+0] = 255- data[i+0]
data[i+1] = 255- data[i+1]
data[i+2] = 255- data[i+2]}this.ctx.putImageData(imagedata, 520.80)},fillsbt3() {
let imagedata = this.ctx.getImageData(80.80.200.200)
let data = imagedata.data
for(var i = 0; i< data.length; i+=4){
data[i+0] + =70
data[i+1] + =70
data[i+2] + =70
}
this.ctx.putImageData(imagedata, 740.80)},fillsbtsepia(){
let imagedata = this.ctx.getImageData(80.80.200.200)
let data = imagedata.data
for(var i = 0; i< data.length; i+=4) {let r = data[i+0]
let g = data[i+1]
let b = data[i+2]
data[i+0] += r * 0.39 + g * 0.76 + b * 0.18
data[i+1] += r * 0.35 + g * 0.68 + b * 0.16
data[i+2] += r * 0.27 + g * 0.53 + b * 0.13
}
this.ctx.putImageData(imagedata, 80.300)},fillsbths(){
let imagedata = this.ctx.getImageData(80.80.200.200)
let data = imagedata.data
for(var i = 0; i< data.length; i+=4) {let r = data[i+0]
let g = data[i+1]
let b = data[i+2]
let average = (r + g + b) / 3
data[i+0] += average
data[i+1] + =0
data[i+2] + =0
}
this.ctx.putImageData(imagedata, 300.300)
},
fillsbttmd () {
let imagedata = this.ctx.getImageData(80.80.200.200)
let data = imagedata.data
for(var i = 0; i< data.length; i+=4){
data[i + 3] = data[i + 3] * 0.3
}
this.ctx.putImageData(imagedata, 520.300)
},
fillsbtmsk () {
let imagedata = this.ctx.getImageData(80.80.200.200)
let data = imagedata.data
for(var i = 0; i< data.length; i+=4){
data[i + 3] = data[i + 3] * 0.3
}
this.ctx.putImageData(imagedata, 520.300)}}}Copy the codeZhejiang Dahua Technology Co., Ltd.- Soft Research – Smart City Product RESEARCH and development Department recruitment of senior front end, welcome to talk, interested in sending resumes to [email protected] all kinds of benefits, less overtime, nice team atmosphere