用JS與html做一個(gè)簡(jiǎn)易畫板代碼
發(fā)表時(shí)間：2024-05-07 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]今天教大家做一個(gè)小程序，利用CSS3和H5以及JS做一個(gè)好玩的簡(jiǎn)易畫板，有興趣的朋友可以動(dòng)手嘗試一下，代碼貼在下面。大家也可以發(fā)揮自己的創(chuàng)造力改動(dòng)一些功能。html：<body><canvas width="800" height="600"...
今天教大家做一個(gè)小程序，利用CSS3和H5以及JS做一個(gè)好玩的簡(jiǎn)易畫板，有興趣的朋友可以動(dòng)手嘗試一下，代碼貼在下面。大家也可以發(fā)揮自己的創(chuàng)造力改動(dòng)一些功能。
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>
相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
怎樣不使用CSS改變鼠標(biāo)懸停樣式
如何用CSS做圖片旋轉(zhuǎn)效果
怎么優(yōu)化HTML網(wǎng)頁(yè)
以上就是用JS和html做一個(gè)簡(jiǎn)易畫板代碼的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
