Home > Developer > JavaScript
Javascript simple canvas development, javascript canvas
The examples in this article share with you how to create a simple javascript canvas for your reference. The specific content is as follows:
Html:
<Body id = "bodys"> <span id = "eraser"> clear all </span> <span id = "colorbtn"> stroke colors </span> <input type = "range" name = "ram" id = "ram" min = "1" max = "20" step = "1" value = "10"/> <label id =" ramnum "> font size: 10px </label> <ul id = "colorpanel"> <li> black </li> <li> Red </li> <li> green </li> <li> blue </li> </ul> </body>
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 ("div"); 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 <colorpanel. children. length; I ++) {colorpanel. children [I]. index = I; colorpanel. children [I]. onclick = function () {// click li to switch the class name to change the style clsname = classname [this. index]; colorpanel. style. display = "none" ;}}// define the default font size as 10px var WIDTH = "10px"; var HEIGHT = "10px "; // adjust the font size by sliding the range. onmousemove = function () {WIDTH = HEIGHT = ram. value + "px"; ramnum. innerHTML = "font size:" + WIDTH;} // click on the screen, create a div property node by swiping the mouse, and set the style document for it. onmousedown = function () {document. onmousemove = function (event) {var oevent = event | window. event; var scrolltop=document.doc umentElement. scrollTop | document. body. scrollTop; var scrollleft+document.doc umentElement. scrollLeft | document. body. scrollLeft; var box = document. createElement ("div"); box. className = clsname; box. style. width = WIDTH; box. style. height = HEIGHT; oBody. appendChild (box); box. style. left = scrollleft + oevent. clientX + "px"; box. style. top = scrolltop + oevent. clientY + "px" ;}}// when the mouse is clicked, cancel the document. onmouseup = function () {document. onmousemove = null;} // when the eraser button is clicked, traverse all the divs and remove them from the parent node one by one. onclick = function () {var oDiv = oBody. getElementsByTagName ("div"); for (var I = 0; I <oDiv. length; I ++) {oBody. removeChild (oDiv [I]) ;}// The following is the bubble event of the cancel button, because the eraser OF THE div cannot be drawn when we click the button. onmousedown = function (event) {var ievent = event | window. event; ievent. cancelBubble = true;} colorbtn. onmousedown = function (event) {var ievent = event | window. event; ievent. cancelBubble = true;} colorpanel. onmousedown = function (event) {var ievent = event | window. event; ievent. cancelBubble = true;} ram. onmousedown = function (event) {var ievent = event | window. event; ievent. cancelBubble = true ;}}}
This is based on javascript-based event writing, which is relatively simple and can be further optimized. Let's take a look.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
