This is the first day of my participation in Gwen Challenge
Create the pixel buffer with createImageData()
createImageDataCreates a new, blank, specified sizeImageDataObject. The default pixel value in the new object istransparent(transparent).- Two arguments, the first argument
ImageDataThe width of the new object, the second argumentImageDataHeight of the new object. - A parameter is passed in as
ImageDataObject. From the existingImageDataObject, copy an object with the same width and height as the object. The image itself is not allowed to be copied.
Generates alternating black and white textures
<! DOCTYPEhtml>
<html lang="en">
<body>
<canvas width="500" height="500" id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas')
var c = canvas.getContext('2d')
// Create the image buffer
var data = c.createImageData(300.200)
// Loop through each image number -- 4 values represent one image number
// -- the first three values represent color and the second value represents transparency
for (var x = 0; x < data.width; x++) {
for (var y = 0; y < data.height; y++) {
var val = 0
// Every 4 images are combined into a square
var horz = Math.floor(x / 4) % 2= =0 / / wide
var vert = Math.floor(y / 4) % 2= =0 / / high
if((horz && ! vert) || (! horz && vert)) { val =255
} else {
val = 0
}
// data.width Width of a row
var index = (y * data.width + x) * 4 // count -- 4 values for each image
data.data[index] = val / / red
data.data[index + 1] = val / / green
data.data[index + 2] = val / / blue
data.data[index + 3] = 255 / / transparency}}// Put the image data back on the canvas
c.putImageData(data, 0.0)
</script>
</body>
</html>
Copy the code
- This feature is simple. We create a new buffer, traverse the pixels of the buffer, set the pixel color based on x and Y coordinates, and put the image data back on the canvas.
- Note that the pixel buffer is also just a one-dimensional array. So we have to calculate the pixel coordinate index ourselves.
- Each pixel component has an integer value. Pixels are made up of red, green, blue and alpha components, so four values confirm the color of an image number. So every time you go through the loop, you have to pay attention to the index position.
Random color
Now let’s change it to randomize the colors.
data.data[index] = Math.random() * 255 / / red
data.data[index + 1] = Math.random() * 255 / / green
data.data[index + 2] = Math.random() * 255 / / blue
Copy the code
This makes it clear that each image can be set to its own color.
Image vertical mirroring
The original image
<! DOCTYPEhtml>
<html lang="en">
<body>
<canvas width="280" height="180" id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas')
var c = canvas.getContext('2d')
var img = new Image()
img.onload = function () {
// Draw a picture
c.drawImage(img, 0.0)
// Get the data buffer on the canvas
var data = c.getImageData(0.0, canvas.width, canvas.height)
// Create a new buffer
var newData = c.createImageData(canvas.width, canvas.height)
// Reverse the pixel data
for (var i = 0, h = data.height; i < h; i++) {
for (var j = 0, w = data.width; j < w; j++) {
newData.data[i * w * 4 + j * 4 + 0] = data.data[(h - i) * w * 4 + j * 4 + 0]
newData.data[i * w * 4 + j * 4 + 1] = data.data[(h - i) * w * 4 + j * 4 + 1]
newData.data[i * w * 4 + j * 4 + 2] = data.data[(h - i) * w * 4 + j * 4 + 2]
newData.data[i * w * 4 + j * 4 + 3] = data.data[(h - i) * w * 4 + j * 4 + 3]}}// Put the new buffer back on the canvas
c.putImageData(newData, 0.0)
}
img.src = '1.jpg'
</script>
</body>
</html>
Copy the code- As before, the color of the corresponding pixel is modified according to the index to generate a new image.
- Here we use a double loop, assigning pixel data from the bottom to the top in reverse order to achieve a vertical mirror image.
Go to the saturated
for (n = 0; n < data.width * data.height; n++) {
var index = n * 4
var r = data.data[index]
var g = data.data[index + 1]
var b = data.data[index + 2]
var v = r * 0.21 + g * 0.71 + b * 0.07 // Color weighted
data.data[index] = v
data.data[index + 1] = v
data.data[index + 2] = v
}
Copy the codeIt’s essentially the same as before, just a different way of manipulating pixels. This turns the color image into a black and white one.
Composite patterns
When we draw multiple figures at the same time, by setting the compound mode, the image at the intersection, the final pixel is calculated according to a formula. Normally we use source-over, where the source pixel (the pixel you are drawing) will be drawn on the target pixel. Lighter display source image + target image, intersection with the white maximum signal value.
<! DOCTYPEhtml>
<html lang="en">
<body>
<canvas width="400" height="400" id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas')
var c = canvas.getContext('2d')
c.globalCompositeOperation = 'lighter' // Set the composite mode
c.fillStyle = '# 000222' // Fill the color
for (var i = 0; i < 50; i++) {
c.beginPath()
c.arc(Math.random() * 400.Math.random() * 400.40.0.Math.PI * 2)
c.closePath()
c.fill()
}
</script>
</body>
</html>
Copy the code
HTML5 Canvas Canvas element composition effect test
shadow
Set according to the shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur properties, shadowColor, offset and blur level to simulate different effects
<! DOCTYPEhtml>
<html lang="en">
<body>
<canvas width="400" height="400" id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas')
var c = canvas.getContext('2d')
c.fillStyle = 'black'
c.fillRect(0.0, canvas.width, canvas.height)
c.shadowColor = 'white' // Sets or returns the color used for the shadow
c.shadowOffsetX = 0 // Sets or returns the horizontal distance between the shape and the shadow
c.shadowOffsetY = 0
c.shadowBlur = 30 // Sets or returns the blur level of shadows
c.font = 'bold 80pt Arial'
c.fillStyle = '#55cc55'
c.fillText('happiness'.30.200)
</script>
</body>
</html>
Copy the code