http://jsfiddle.net/46Gy4/
想要練習一下canvas，沒事寫個玩玩，可惜電腦上沒裝photoshop，要不然能更好看些。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>#a { display: block; margin: 0 auto; border:3px solid; cursor:url('pencil.png'),auto;}h1 { text-align:center;}.operation { margin: 0 auto;width: 400px;height: 100px;}.operation ul { list-style:none; }ul li { margin-top: 6px;}li.range { padding-left: 44px;}li.color { padding-left: 97px;}#rangeValue { vertical-align: super; margin-left: 10px;}</style></head><body><div class="content"><h1>Canvas 塗鴉牆</h1><div class="operation"> <ul> <li> <label>畫筆樣式</label><select id="type"><option value="arc">圓形筆刷</option><option value="rect">矩形筆刷</option></select> </li><li class="range"><label>畫筆大小</label><input id="rangeInput" type="range" min="1" max="50" value="25"><span id="rangeValue">25</span></li><li class="color"><label>畫筆顏色</label><input id="colorInput" type="color"></li></ul></div><canvas id="a" width="600px" height="600px"></canvas><button id="translate">Translate</button> <img id="canvasImg"></div><script>var ctx;var x;var y;var a;var dragFlag = false;var rangeInput,colorInput,type;function circle(x,y,r,color) { ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2, true); ctx.closePath(); ctx.fillStyle = color; ctx.fill(); }function drawRect(x,y,w,h,color) { ctx.beginPath(); ctx.rect(x,y,w,h); ctx.closePath(); ctx.fillStyle = color;ctx.fill(); } function init() { var canvas = document.getElementById("a");rangeInput = document.getElementById("rangeInput");colorInput = document.getElementById("colorInput");type = document.getElementById("type");rangeInput.addEventListener("change",changeRange);ctx = canvas.getContext("2d");document.getElementById("translate").addEventListener("click",translate);canvas.addEventListener("mousemove",mouseMove); canvas.addEventListener("mousedown",mousedown); canvas.addEventListener("mouseup",mouseup); //a = setInterval(draw, 10); }function translate(e){document.getElementById("canvasImg").src = ctx.canvas.toDataURL();}function changeRange(e){var range = e.currentTarget.value; document.getElementById("rangeValue").innerHTML = range;}function draw(){//circle(x,y,10);}function mousedown(){dragFlag = true;}function mouseup(){dragFlag = false;}function mouseMove (e){var rect = e.currentTarget.getBoundingClientRect(); var gravityPoint = { x: e.clientX - rect.left, y: e.clientY - rect.top }; x = gravityPoint.x; y = gravityPoint.y; if (dragFlag) { if (type.value == "arc") { circle(x,y+40,rangeInput.value,colorInput.value); } else { drawRect(x,y,rangeInput.value,rangeInput.value,colorInput.value) } }}init();</script></body></html>
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
