©2020-2024 ioDraw All rights reserved
<> Implementation principle
* Implementation mode 1 ( simple )
Train diagram
use cancas Sketchpad implementation . Cycle refresh and draw Sketchpad pixels , Each loop changes the shape of the drawing element x coordinate
Core function ：
clearRect(x,y,width,height) Clears the specified pixels within the given rectangle
fillText(content,x,y) take content Content is drawn to the specified (x,y) place
Source code display :
var canvas = document.getElementById("canvas-1");// obtain cancas label dom element var vas =
canvas.getContext("2d");// Get Sketchpad operation object var barrage_content =
document.getElementsByClassName("barrage-content")[0];// Get the screen display area dom var width =
barrage_content.clientWidth;// Get display area width var height =
barrage_content.clientHeight;// Get display area height var positionTop =
barrage_content.clientTop;// Get display area top var postionLeft =
barrage_content.clientLeft;// Get display area left var rect =
barrage_content.getBoundingClientRect();// Get display area rectangle range area var numX = [100, 150,
260,270,300,310,315,415,400,250];// initial X Location pool var numY = [100, 300,
400,320,60,55,389,260,235,210];// initial Y Location pool var rangeValue = 20; // Test barrage data var
barrageData_2 = [ { "content":" The first barrage .............", "color":"red", "speed":2,
"textSize":20, "positionX":0, "positionY":0 }, {
"content":" Third barrage .............", "color":"green", "speed":6, "textSize":20,
"positionX":0, "positionY":0 }, { "content":" The second bullet screen .............",
"color":"red", "speed":2, "textSize":20, "positionX":0, "positionY":0 }, {
"content":" The fourth bullet screen .............", "color":"blue", "speed":8, "textSize":20,
"positionX":0, "positionY":0 }, { "content":" Fifth barrage .............",
"color":"black", "speed":2, "textSize":20, "positionX":0, "positionY":0 }, {
"content":"-------- Random barrage -------------.", "color":"green", "speed":2,
"textSize":20, "positionX":0, "positionY":0 }, {
"content":"-------- Random barrage -------------.", "color":"green", "speed":2,
"textSize":20, "positionX":0, "positionY":0 }, {
"content":"-------- Random barrage -------------.", "color":"green", "speed":2,
"textSize":20, "positionX":0, "positionY":0 }, {
"content":"-------- Random barrage -------------.", "color":"green", "speed":2,
"textSize":20, "positionX":0, "positionY":0 }, {
"content":"-------- Random barrage -------------.", "color":"green", "speed":2,
"textSize":20, "positionX":0, "positionY":0 }, {
"content":"-------- Random barrage -------------.", "color":"green", "speed":2,
"textSize":20, "positionX":0, "positionY":0 }, {
"content":"-------- Random barrage -------------.", "color":"green", "speed":2,
"textSize":20, "positionX":0, "positionY":0 }, {
"content":"-------- Random barrage -------------.", "color":"green", "speed":2,
"textSize":20, "positionX":0, "positionY":0 }, {
"content":"-------- Random barrage -------------.", "color":"green", "speed":2,
"textSize":20, "positionX":0, "positionY":0 }, {
"content":"-------- Random barrage -------------.", "color":"green", "speed":2,
"textSize":20, "positionX":0, "positionY":0 }, {
"content":"-------- Random barrage -------------.", "color":"green", "speed":2,
"textSize":20, "positionX":0, "positionY":0 } ]; (function () { var color =
["red","blue","green"];// Random color Pool console.log("barrage_clientWidth", width,
"barrage_clientHeight", height); canvas.width = width;// Set up Sketchpad width canvas.height
= height;// Set up Sketchpad height vas.rect(rect.left, rect.top, rect.width,
rect.height);// Create a Sketchpad rectangle // vas.font = "20px Arial" for (var i = 0; i
<barrageData_2.length;i++){// Initial barrage X,Y coordinate barrageData_2[i]["positionX"] =
numX[Math.floor(Math.random() * 10)]; barrageData_2[i]["positionY"] =
numY[Math.floor(Math.random() * 10)]; } setInterval(function () {// Refresh Sketchpad regularly
vas.clearRect(0, 0, rect.width, rect.height); for (var i = 0; i <
barrageData_2.length; i++) {// Refresh the position of each barrage barrageData_2[i]["positionX"] =
barrageData_2[i]["positionX"] - barrageData_2[i]["speed"] * 0.6; vas.fillStyle
= barrageData_2[i]["color"]; vas.font = barrageData_2[i]["textSize"] + "px
Arial"; vas.fillText(barrageData_2[i]["content"],
barrageData_2[i]["positionX"], barrageData_2[i]["positionY"]); } //
console.log("textWidth: ",
vas.measureText(barrageData_2[0]["content"]).valueOf()); for (var i = 0; i <
barrageData_2.length; i++){ if (barrageData_2[i]["positionX"] < -100) {
barrageData_2[i]["positionX"] = rect.width; } } }, 30); //
console.log("slider-handle: ", sliderHandle); //
vas.fillText("================================ Clear test text ===================================",
0, 200); // vas.clearRect(rect.left, rect.top, rect.width, rect.height); })();
<> The above is the implementation of the source code
<> In the next blog, I'll introduce another implementation method , Can achieve mouse hover to change the style , give the thumbs-up , report
Technology