本文主要教您如何使用Html5編寫(xiě)自己的繪圖板，執(zhí)行繪畫(huà)，調(diào)整顏色和其他操作。有興趣的朋友可以參考

我最近了解到html5強(qiáng)大的繪畫(huà)功能，這讓我感到驚訝，因此我寫(xiě)了一個(gè)小工具---涂鴉板，可以實(shí)現(xiàn)以下功能：繪畫(huà)，更改顏色，調(diào)整畫(huà)筆大小

html5繪圖可分為點(diǎn)，線，面，圓，圖片等涂鴉板 php代碼，點(diǎn)和線，它們是所有平面效果的基本點(diǎn)。有了這兩件事涂鴉板 php代碼，沒(méi)有什么可以畫(huà)的，只有意外的算法。

首先上傳代碼：

html

效果：

好的，已經(jīng)準(zhǔn)備好一個(gè)簡(jiǎn)單的繪圖界面，讓我們開(kāi)始編寫(xiě)一些線條繪圖代碼

$.Draw = {};   
$.extend($.Draw, {   
    D2: "",   
    CX:"",   
    box: "mycavas",//畫(huà)布id   
    boxObj:function(){//畫(huà)布對(duì)象   
        this.CX=document.getElementbyId(this.box);   
    },   
    D2:function(){//2d繪圖對(duì)象   
       this.D2 = this.CX.getContext("2d");   
    },   
    Cricle: function (x, y, r, color) {//畫(huà)圓   
        if (this.D2) {   
            this.D2.beginpath();   
            this.D2.arc(x, y, r, 0, Math.pI * 2, true);   
            this.D2.closepath();   
            if (color) {   
                this.D2.fillStyle = color;   
            }   
            this.D2.fill();   
        }   
    },   
    init: function () {//初始化   
        this.boxObj();   
        this.D2();   
    }   
  
})

我相信每個(gè)人都可以在這里理解簡(jiǎn)單的代碼。主要的工作是創(chuàng)建一個(gè)對(duì)象，包括創(chuàng)建畫(huà)布，創(chuàng)建2d對(duì)象，繪制圓形方法和對(duì)象初始化方法。

在前html頁(yè)面旁邊調(diào)用該對(duì)象/ p>

查看代碼：

var color = "#000000";//初始化顏色   
        var size = 5;//初始化尺寸   
        document.getElementbyId('color1').onchange = function () {   
            color = this.value;   
        };   
        document.getElementbyId('size').onchange = function () {   
            size = this.value;   
        };   
        $.Draw.init();//初始化   
        var tag = false;//控制鼠標(biāo)當(dāng)前狀態(tài)并起到開(kāi)啟油墨開(kāi)關(guān)的作用   
        var current = {};//存儲(chǔ)鼠標(biāo)按下時(shí)候的點(diǎn)   
        document.onmousedown = function (option) {//鼠標(biāo)按下事件   
            current.x = option.x;   
            current.y = option.y;   
            $.Draw.Cricle(option.x, option.y, size, color);   
            tag = true;   
        }   
        document.onmouseup = function () {//鼠標(biāo)抬起事件   
            tag = false;   
        }   
        document.onmousemove = function (option) {//鼠標(biāo)移動(dòng)事件   
            if (tag) {   
                if (size >= 0) {   
                    $.Draw.Cricle(option.x, option.y, size, color);   
                }    
            }   
        }

此代碼主要具有以下含義

1.捕獲拖動(dòng)欄控件的顏色空間和change事件以獲得相應(yīng)的顏色和尺寸值，并將其存儲(chǔ)在以下繪圖線中

2.初始化圖形對(duì)象

3.捕獲鼠標(biāo)按下，抬起和移動(dòng)事件，關(guān)鍵是開(kāi)關(guān)可以控制墨水

好吧，我的書(shū)法上只有一個(gè)簡(jiǎn)單的涂鴉板：

相關(guān)文章：

基于純CSS3的6種手繪涂鴉按鈕效果

如何使用html5和css3完成Google涂鴉動(dòng)畫(huà)

基于javascript html5畫(huà)布實(shí)現(xiàn)具有可調(diào)整的畫(huà)筆顏色/厚度/橡皮擦的涂鴉板

以上是Html5的示例代碼的詳細(xì)內(nèi)容，以簡(jiǎn)單地實(shí)現(xiàn)涂鴉板。有關(guān)更多信息，請(qǐng)關(guān)注php中文網(wǎng)站上的其他相關(guān)文章！

名稱欄目：這篇文章主要教大家如何使用Html5編寫(xiě)屬于自己的畫(huà)畫(huà)板
文章URL：http://www.aaarwkj.com/news13/295913.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、云服務(wù)器、網(wǎng)站設(shè)計(jì)、定制網(wǎng)站、網(wǎng)站制作、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)