這篇文章主要教大家如何使用Html5編寫屬于自己的畫畫板

2023-11-21 分類：網站建設

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

我最近了解到html5強大的繪畫功能，這讓我感到驚訝，因此我寫了一個小工具---涂鴉板，可以實現以下功能：繪畫，更改顏色，調整畫筆大小

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

首先上傳代碼：

html

效果：

好的，已經準備好一個簡單的繪圖界面，讓我們開始編寫一些線條繪圖代碼

$.Draw = {};   
$.extend($.Draw, {   
    D2: "",   
    CX:"",   
    box: "mycavas",//畫布id   
    boxObj:function(){//畫布對象   
        this.CX=document.getElementbyId(this.box);   
    },   
    D2:function(){//2d繪圖對象   
       this.D2 = this.CX.getContext("2d");   
    },   
    Cricle: function (x, y, r, color) {//畫圓   
        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();   
    }   
  
})

我相信每個人都可以在這里理解簡單的代碼。主要的工作是創建一個對象，包括創建畫布，創建2d對象，繪制圓形方法和對象初始化方法。

在前html頁面旁邊調用該對象/ 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;//控制鼠標當前狀態并起到開啟油墨開關的作用   
        var current = {};//存儲鼠標按下時候的點   
        document.onmousedown = function (option) {//鼠標按下事件   
            current.x = option.x;   
            current.y = option.y;   
            $.Draw.Cricle(option.x, option.y, size, color);   
            tag = true;   
        }   
        document.onmouseup = function () {//鼠標抬起事件   
            tag = false;   
        }   
        document.onmousemove = function (option) {//鼠標移動事件   
            if (tag) {   
                if (size >= 0) {   
                    $.Draw.Cricle(option.x, option.y, size, color);   
                }    
            }   
        }

此代碼主要具有以下含義

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

2.初始化圖形對象

3.捕獲鼠標按下，抬起和移動事件，關鍵是開關可以控制墨水

好吧，我的書法上只有一個簡單的涂鴉板：

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

如何使用html5和css3完成Google涂鴉動畫

基于javascript html5畫布實現具有可調整的畫筆顏色/厚度/橡皮擦的涂鴉板

以上是Html5的示例代碼的詳細內容，以簡單地實現涂鴉板。有關更多信息，請關注php中文網站上的其他相關文章！

名稱欄目：這篇文章主要教大家如何使用Html5編寫屬于自己的畫畫板
文章URL：http://m.newbst.com/news13/295913.html

成都網站建設公司_創新互聯，為您提供企業網站制作、云服務器、網站設計、定制網站、網站制作、網站導航