Javascript HTML5 Canvas_javascript スキルで実装されたお絵かきボード
May 16, 2016 pm 03:02 PM
canvas
html5
javascript
製図板
この記事の例では、参考のために HTML5 Canvas で実装された描画ボード コードを共有します。具体的な内容は次のとおりです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DEMO6:自定义画板</title> </head> <body> <canvas id="canvas" width="600" height="300"> 浏览器不支持canvas <!-- 如果不支持会显示这段文字 --> </canvas> <br/> <button style="width:80px;background-color:yellow;" onclick='linecolor="yellow";'>YELLOW</button> <button style="width:80px ;background-color:red;" onclick='linecolor="red";'>RED</button> <button style="width:80px ;background-color:blue;" onclick='linecolor="blue";'>BLUE</button> <button style="width:80px ;background-color:green;" onclick='linecolor="green";'>GREEN</button> <button style="width:80px ;background-color:white;" onclick='linecolor="white";'>WHITE</button> <button style="width:80px ;background-color:black;" onclick='linecolor="black";'>BLACK</button> <br/> <button style="width: 80px;background-color: white;" onclick="linw=4;">4PX</button> <button style="width: 80px;background-color: white;" onclick="linw=8;">8PX</button> <button style="width: 80px;background-color: white;" onclick="linw=16;">16PX</button> <br/> <button style="width: 80px;background-color: white;" onclick="copyimage();">EXPORT</button> <br/> <img src="" id="image_png" width="600px" height="300px"> <br/> <script type="text/javascript"> var canvas = document.getElementById('canvas'); //获取标签 var ctx = canvas.getContext("2d"); var fillStyle = "black"; ctx.fillRect(0,0,600,300); var onoff = false; //按下标记 var oldx = -10; var oldy = -10; //设置颜色 var linecolor = "white"; var linw = 4; canvas.addEventListener("mousemove",draw,true); //鼠标移动事件 canvas.addEventListener("mousedown",down,false); //鼠标按下事件 canvas.addEventListener("mouseup",up,false); //鼠标弹起事件 function down(event){ onoff = true; oldx = event.pageX - 10; oldy = event.pageY - 10; } function up(){ onoff = false; } function draw(event){ if (onoff==true) { var newx = event.pageX - 10; var newy = event.pageY - 10 ctx.beginPath(); ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle = linecolor; ctx.lineWidth = linw; ctx.lineCap = "round"; ctx.stroke(); oldx = newx; oldy = newy; } } function copyimage(event) { var img_png_src = canvas.toDataURL("image/png"); //将画板保存为图片格式的函数 document.getElementById("image_png").src = img_png_src; } </script> </body> </html>
ログイン後にコピー
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

人気の記事
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7284
9


Java チュートリアル
1622
14


CakePHP チュートリアル
1342
46


Laravel チュートリアル
1259
25


PHP チュートリアル
1206
29

