我的啟蒙--HTML5 第三章 Canvas

最後更新：2017-08-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：new 環境 asc 對象移動用法 offset == 設定

canvas　　　　基本用法

　　　　要使用canvas元素，必須設定其width和height屬性！並且需要添加一些樣式才能在頁面上看見。
　　　　2d上下文：要在canvas上畫圖，需要取得繪圖上下文(2d)。
　　　　通過canvas元素調用getContext（）方法並傳入內容相關的名字“2d”，就可以擷取到2d內容物件。
　　　　通過2d內容物件調用相關的API就可以在canvas上肆意繪畫。

　　Canvas繪圖- JavaScript 來繪製映像

　　　　canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：

<canvas id="myCanvas" width="200" height="100"    style="border:1px solid #000000;"></canvas>

　　全部屬性和寫法如下

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>            </head>    <body>        畫筆大小：        <button>粗</button>        <button>中</button>        <button>細</button>        <button>橡皮</button>        <button>清屏</button>        <input type="color"  id="col" value="#e44444" /><br />                <canvas id="myCanvas" width="900" height="550" style="border: 1px solid red; "></canvas>        <script type="text/javascript">            drow();            function drow(){                var can = document.getElementById("myCanvas");//聲明一個變數                if(can.getContext){                    var cd = can.getContext("2d");//聲明2d環境                    var but = document.getElementsByTagName("button");                    var a = 1;                    var b = 1;                    but[0].onclick = function(){                        a=10;//這裡是第一個畫筆                    }                    but[1].onclick = function(){                        a=5;                    }                    but[2].onclick = function(){                        a=1;                    }                    but[3].onclick = function(){                        b+=1                    }                    but[4].onclick = function(){                        cd.clearRect(0,0,900,550);                    }                    can.onmousedown = function(ev){                        var x = ev.clientX-can.offsetLeft;                        var y = ev.clientY-can.offsetTop;                        cd.beginPath();                        cd.moveTo(x,y);                        cd.lineWidth = a;                        can.onmousemove = function(ev){                            if (b%2 == 1) {                                var nex = ev.clientX-can.offsetLeft;//移動後的新點                            var ney = ev.clientY-can.offsetTop;                            cd.lineTo(nex,ney);                            cd.strokeStyle = col.value;                            cd.stroke();                                but[3].innerHTML = "橡皮"                                                    } else{                                but[3].innerHTML = "鉛筆"                                var nex = ev.clientX-can.offsetLeft;//移動後的新點                            var ney = ev.clientY-can.offsetTop;                            cd.clearRect(nex,ney,10,10);                                                        }                                                    }                        can.onmouseup = function(){                            can.onmousemove = null;                        }                    }                }                                            }                                            </script>                    </body></html>

謹記當初奮鬥的自己,是他讓現在的自己,享受美好, 敬給還在奮鬥的你們,望與君共勉.

我的啟蒙--HTML5 第三章 Canvas

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More