2. 程式人生 > >（練習題）canvas畫板（簡）

（練習題）canvas畫板（簡）

阿新 • • 發佈：2017-05-10
play dev off etl event html -s span line

canvas：IE9及以上版本，主流瀏覽器都支持。

註意：當需要設定canvas的高度時不要寫在css中，canvas默認是300x150，在css中設置寬高相當於等比放大或者縮小了，canvas中的內容也會等比放大或者縮小。

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        #canvas {
            display: block;
            margin: 
 
0 auto;
            border: 1px solid #000;
        }

    </style>
</head>

<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script>
        var canvas = document.getElementById(‘canvas‘);
        var context = canvas.getContext(‘2d‘);
        canvas.onmousedown 
 
= function(ev) {
            var ev = ev || window.event;
            context.moveTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop);
            document.onmousemove = function(ev) {
                var ev = ev || window.event;
                context.strokeStyle = ‘yellow‘
                context.lineTo(ev.clientX 
 
- canvas.offsetLeft, ev.clientY - canvas.offsetTop);
                context.stroke();
            }
            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmousedown = null;
            }
        }

    </script>
</body>

</html>

（練習題）canvas畫板（簡）

相關推薦

（練習題）canvas畫板（簡）

play dev off etl event html -s span line canvas：IE9及以上版本，主流瀏覽器都支持。 註意：當需要設定canvas的高度時不要寫在css中，canvas默認是300x150，在css中設置寬高相當於等比放大或者縮小了，ca

js設定canvas的寬高（動態設定canvas的寬高）

設定canvas的寬高有兩種方式：     1：在html的canvas標籤中設定寬高 <body> <canvas id="canvas" width="300" he

canvas.toDataUrl 畫布匯出功能（將canvas畫板儲存為圖片格式）！

html虛擬碼： -------------------------------------------------------------------------------------------------------------------------------

canvas小畫板——（2）熒光筆效果

我們在上一篇文章中講了如何繪製平滑曲線 canvas小畫板——（1）平滑曲線。 透明度實現熒光筆 現在我們需要加另外一種畫筆效果，帶透明度的熒光筆。那可能會覺得繪製畫筆的時候加上透明度就可以了。我們來在原來程式碼上設定 ctx.globalAlpha屬性為0.3，或者將str

PC端變成手機端的時候，把特效去掉（把canvas標簽去掉）

window 方法 spa color win css display screen span PC端變成手機端的時候，把特效去掉（把canvas標簽去掉）<script> if (screen.width < 768){ $(‘can

Canvas入門（1）：繪制矩形、圓、直線、曲線等基本圖形

dsm etc win cti b2c 創建 例如 .com courier 來源：http://www.ido321.com/968.html 一、Canvas的基礎知識 Canvas是HTML 5中新增的元素，專門用於繪制圖形。canvas元素就相當於一塊“畫布

CSS3-Canvas畫布（圖形-圓）

oct function 對象 htm con utf-8 context set 支持 <!DOCTYPE html5><html lang="en"><head> <meta charset="UTF-8">

canvas入門（繪制篇）

ava 入門 draw itl close javascrip path res doctype 什麽是canvas？ 　　canvas即畫布，HTML5的canvas元素可以在其矩形區域繪制圖像。 創建canvas，通過js創建context對象 <canvas

SQL語句（練習題）

零售價 sql語句 鍵盤 庫存 tor having 機械 大於 lec #1#需求:查詢所有貨品信息SELECT * FROM product;#需求:查詢所有貨品的id,supplier,cutoffSELECT id,supplier,cutoff FROM prod

《大道至簡》第一章讀後感（java偽代碼形式編寫）

數據 不能 三種 diy 選擇 cas 程序包 喜歡 java public class DaDaoZhiJianDiYiDuan { //一.愚公移山 //問題：怎樣把山移完 //愚公移山是一個項目 if(愚公死) { 有子存焉； while（山不平） { 子又生孫，

canvas學習（一）：線條，圖像變換和狀態保存

itl height tar 默認 class limit 方法 星空 stop canvas學習（一）：線條，圖像變換和狀態保存 一：繪制一條線段： var canvas = document.getElementById(‘canvas‘) var ctx = can

短實習---Java多線程（練習題）

nano target ide user hide logs log mk4 oci 6srktd扔遲陜庸啦湯http://jz.docin.com/zdzq90039afa2c1堪逗城湛誚韌http://www.docin.com/app/user/userinfo?us

canvas入門（五）

疊加 ans sla idt 分享 com 位移 res gree canvas一樣可以使用圖形變換。 位移，translate（x, y）； 旋轉：retate(deg)； 縮放：scale(sx，sy)； 但這個過程有個陷阱，如 canvas.width =

shell練習題之bash知識點（for循環、if判斷語句結構練習）

bash相關、bash知識點：文件測試[ ][[ ]]test單目測試：-e file ：測試文件是否存在-a file ：測試文件是否存在-f file： 測試是否為普通文件-d 目錄： 測試是否為目錄文件-h file: 測試是否為鏈接文件-r somefile： 測試其有效用戶是否對此文件有讀取權

（四）canvas繪制路徑

ble 清除 需要 max 理解 1.0 寬度 content pda save() 樣式不受汙染的起始範圍 shadowOffsetX 陰影x軸的距離 shadowOffsetY 陰影y軸的

（三）canvas繪制樣式

document ice 連接 scala fff utf-8 技術分享 mar black beginPath() 對畫線點的一個開始限制 moveTo() 畫線的起點，只在開頭使用 參數兩個x軸，y軸

Canvas繪圖 （html5新增特性）

get back etc lur rect() odata 調用方法 ima 圖像 Canvas 使用<canvas>對象,需要設置屬性：width，height。指定繪圖的區域大小。在canvas標簽前後出現的信息將在不支持<canvas

Linux驅動之平臺設備驅動模型簡析（驅動分離分層概念的建立）

技術 描述 rst 操作 mem iou 系統 簡單 reg Linux設備模型的目的：為內核建立一個統一的設備模型，從而有一個對系統結構的一般性抽象描述。換句話說，Linux設備模型提取了設備操作的共同屬性，進行抽象，並將這部分共同的屬性在內核中實現，而為需要新添加設備

cpp學習（三）使用VS進行簡單調試

數據 再次 項目 多個項目 rdebug -o debug size 容量 接著學習一下使用VS進行簡單的代碼調試。非常簡單，都是操作性的東西。在學完c++以後我會繼續講解調試原理，並和大家一起打造一款自己的調試器。首先新建一個工程，並在項目屬性裏面關閉SDL檢查：（參考上

如何儲存jtopo中生成得圖片（canvas中得圖片）

這是在使用jtopo（一款完全基於HTML5 Canvas的關係、拓撲圖形化介面開發工具包） 有興趣得可以瞭解一下（http://www.jtopo.com/） 在開發得過程中有匯出canvas中得圖片得功能，以下為程式碼，親測有效（可直接使用） //先獲取到canvas  v