Aujourd'hui, je vais vous apprendre à créer un petit programme, en utilisant CSS3, H5 et JS pour créer une planche à dessin simple et amusante. Les amis intéressés peuvent l'essayer. Le code est publié ci-dessous. Chacun peut également faire preuve de créativité pour modifier certaines fonctions.
html：
<body>
<canvas width="800" height="600" id="c1">
<span>
</span>
</canvas>
<ul id="ul1">
<li>颜色版：<input id="color" type="color"/></li>
<li>笔触：<input id="num" type="number" min="0" max="100"/></li>
<li></li>
</ul>
</body>
css：
<style>
*{ margin:0; padding:0;}
body{ background:#000;}
canvas{ background:#fff; float:left;}
span{ color:#fff; font-size:80px;}
#ul1{width:100px;height:600px; float:left; background:#ccc;}
</style>
javascript:
<script>
window.onload=function(){
var oC=document.getElementById('c1');
var oColor=document.getElementById('color');
var oNum=document.getElementById('num');
var gd=oC.getContext('2d');//画笔
oNum.onchange=function(){
gd.lineWidth = oNum.value;
strokeFn();
};
oColor.onchange=function(){
gd.strokeStyle = oColor.value;
strokeFn();
};
strokeFn();
function strokeFn(){
gd.beginPath();
oC.onmousedown=function(ev){
gd.moveTo(ev.clientX,ev.clientY);
oC.onmousemove=function(ev){
gd.lineTo(ev.clientX,ev.clientY);
gd.stroke();
};
oC.onmouseup=function(){
oC.onmousemove=oC.onmouseup=null;
};
return false;
};
}
};
</script>Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment changer le style de survol de la souris sans utiliser CSS
Comment utiliser CSS pour créer une image effet de rotation
Comment optimiser les pages Web HTML
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
