This article provides an example of the simple javascript canvas for your reference. The details are as follows:
Html:
Clear all stroke colorsFont size: 10px
CSS:
*{margin: 0;padding: 0; }.box_black{background-color: black;position: absolute;}.box_red{background-color: red;position: absolute;}.box_green{background-color: green;position: absolute;}.box_blue{background-color: blue;position: absolute;}#eraser{width: 80px;height: 50px;background-color: brown;display: inline-block;text-align: center;line-height: 50px;cursor: pointer;}#colorbtn{width: 80px;height: 50px;background-color: tomato;display: inline-block;text-align: center;line-height: 50px;cursor: pointer;}#colorpanel{width: 80px;height: 200px;list-style: none;margin-left: 88px;display: none;}#colorpanel>li{width: 80px;height: 50px;text-align: center;line-height: 50px;background-color: aquamarine;display: inline-block;cursor: pointer;}#colorpanel>li:hover{background-color: orange;}
Javascript:
Window. onload = function () {// Save the class name as an array var classname = ["box_black", "box_red", "box_green", "box_blue"]; // The default class name is box_black var clsname = classname [0]; var oBody = document. getElementById ("bodys"); var oDiv = oBody. getElementsByTagName ("p"); var eraser = document. getElementById ("eraser"); var colorbtn = document. getElementById ("colorbtn"); var colorpanel = document. getElementById ("colorpanel"); var ram = document. getElementById ("ram"); var ramnum = document. getElementById ("ramnum"); colorbtn. onmouseover = function () {colorpanel. style. display = "block";} colorbtn. onmouseout = function () {colorpanel. style. display = "none";} colorpanel. onmouseover = function () {this. style. display = "block";} colorpanel. onmouseout = function () {this. style. display = "none";} for (var I = 0; I
This is based on javascript-based event writing, which is relatively simple and can be further optimized. Let's take a look.