canvas實現簡單的畫圖功能

阿新 • • 發佈：2019-01-04

var bot;//畫布div var X,Y,X1,Y1;//座標 var flag=0; var time;//定時器ID var color=0;//記住所選顏色 var lineW=2;//畫筆粗細 var canvas;//建立畫布 var context;//獲取上下文 var isMouseDown=false;//記錄滑鼠是否按下 window.onload=function(){ //建立畫布 canvas=document.getElementById("can"

); //獲取上下文 context=canvas.getContext("2d"); bot=document.getElementById("bottom"); bot.onmousedown=mouseDownAction; bot.onmousemove=mouseMoveAction; document.onmouseup=mouseUpAction; } /** *選中畫筆顏色 */

function pen_click(num){ var chk=document.getElementsByTagName("input"); for(var i=0;i<chk.length;i++){ if(i==num){ chk[i].checked=true; color=i; }else { chk[i].checked=""; } } } /** * 畫筆粗細 */

function line_wid(num){ lineW=num; } /** *滑鼠按下 */ function mouseDownAction(e){ isMouseDown=true; //記錄下滑鼠點選的時候的位置 X= e.offsetX; Y= e.offsetY; } /** *滑鼠移動 */ function mouseMoveAction(e){ if(isMouseDown){ X1= e.offsetX; Y1= e.offsetY; drowline(X,Y,X1,Y1); flag++; } } /** *滑鼠彈起來 */ function mouseUpAction(e){ isMouseDown=false; flag=0; } /** * 繪製 */ function drowline(num1,num2,num3,num4){ //開啟新的路徑 if(flag) context.beginPath(); //移動畫筆的初始位置 context.moveTo(num1,num2); context.lineWidth=lineW; if(color==0){ context.strokeStyle="red"; }else if(color==1){ context.strokeStyle="green"; }else if(color==2){ context.strokeStyle="blue"; } //移動畫筆的結束位置 context.lineTo(num3,num4); //開始繪製 context.stroke(); if(flag!=0){ X=X1; Y=Y1; } } function save_pic(){//儲存畫圖 var div=document.getElementsByClassName("div"); if(div[div.length-1].innerHTML!=""){ alert("儲存空間已滿，無法儲存，請清除空間！") } var str=canvas.toDataURL("image/png",0.92); for(var i=0;i<div.length;i++){ if(div[i].innerHTML==""){ var s="<img src='"+str+"' style='width: 250px;height: 250px;'>"; div[i].innerHTML=s; break; } } } function clear_pic(){//清除畫布 context.clearRect(0,0,500,500); } function clear_save(){//清除儲存 var div=document.getElementsByClassName("div"); for(var i=0;i<div.length;i++){ div[i].innerHTML=""; } }

canvas實現簡單的畫圖功能

var bot;//畫布div var X,Y,X1,Y1;//座標 var flag=0; var time;//定時器ID var color=0;//記住所選顏色 var lineW=2;//畫筆粗細

canvas實現簡單的畫筆功能

<!DOCTYPE> <html><head><meta charset="UTF-8"><title>模仿筆畫</title><style type="text/css">#_canvas{background-color:

Shell 實現簡單計算器功能

shell 計算器Shell 實現簡單計算器功能，腳本如下：[[email protected]/* */ scripts]# cat jisuan.sh #!/bin/bash print_usage(){ printf $"USAGE:$0 NUM1 {+|-|*|/} NUM2\n"

python實現簡單爬蟲功能

我們目錄 size .com all 本地文件使用 url alt 　在我們日常上網瀏覽網頁的時候，經常會看到一些好看的圖片，我們就希望把這些圖片保存下載，或者用戶用來做桌面壁紙，或者用來做設計的素材。　　我們最常規的做法就是通過鼠標右鍵，選擇另存為。但有些圖片鼠標右

在控件內實現簡單畫筆功能

box use from uic eve args class 窗體 down /// <summary> /// 實現窗體內簡單畫筆功能 /// </summary> public class DrawClass {

在VR中模擬用鼠標操作電腦並實現簡單畫圖的小程序

npr 事件 line 屏幕 reset relative max using false (圖沒有錄好，明天換一下) 一、概述 1.實現的基本操作是：　　1）用手柄抓住黃色的方塊代表手抓住鼠標。　　2）通過移動手柄模擬鼠標移動，電腦屏幕上的光標跟著移動。　　3）當

canvas實現驗證碼功能

code 區分大小寫 font num type move style lower 輸入我們在做一些後臺系統登錄功能的時候，一般都會用到驗證碼，最多的就是後臺生成的驗證碼圖片返回給前端的。也可以不調用後端接口，前端使用canvas直接生成驗證碼。由於功能過於簡單，不需要

Python實現簡單爬蟲功能--批量下載百度貼吧裡的圖片

在上網瀏覽網頁的時候，經常會看到一些好看的圖片，我們就希望把這些圖片儲存下載，或者使用者用來做桌面桌布，或者用來做設計的素材。　　我們最常規的做法就是通過滑鼠右鍵，選擇另存為。但有些圖片滑鼠右鍵的時候並沒有另存為選項，還有辦法就通過就是通過截圖工具擷取下來，但這樣就降低圖片的清晰度

JS 實現簡單計算器功能

// if(symbol != null){ console.log(aNum, bNum); getResult(symbol, aNum, bNum); show.innerHTML = result;

利用ThinkPhp5來實現簡單註冊功能

利用ThinkPhp5來實現簡單註冊功能 1，首先在登入介面index.html上增加一個註冊buuton， Index.html介面： 2.註冊button按鈕跳轉到controller中Register.php檔案的register方法裡，利用fetch方法來渲染註冊介面。 R

利用tkinter實現簡單計算器功能（不使用eval函式）

利用tkinter實現簡單計算器功能（不使用eval函式）一、思路 tkinter：佈置主介面；上部為數字顯示介面；下部為數字鍵與功能鍵介面；邏輯：程式只考慮兩個運算元進行計算的情況，不考慮複雜情況展示：

JS實現簡單loading功能頁面

<html> <head> <title>正在載入...</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

php實現簡單記事本功能

首先先做個html網頁表單程式碼=》 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-

使用canvas實現簡單動畫

大多數 Canvas 繪圖 API 都沒有定義在 <canvas> 元素本身上，而是定義在通過畫布的 getContext()獲得的一個“繪圖環境”物件上。實現如下星星的運動<!DOCTYPE html> <html> <head&g

android利用Intent.ACTION_SEND實現簡單分享功能

android中，利用Intent.ACTION_SEND可以實現簡單“分享”功能，可以分享文字、圖片等到其他應用，像微信、QQ、簡訊等。 MainActivity.java檔案： package com.example.androidtest; import java

2.使用canvas實現簡單的畫直線橡皮筋式畫框

css樣式基本和之前的一樣，這裡就不提了， HTML程式碼： <div id='controls'> Stroke color: <select id="strokeStyleSelect">

canvas 實現簡單的影象擴散

canvas 實現簡單的影象擴散 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="8

shell指令碼——實現簡單的功能

一、Hello Word的輸出：二、shell判斷是否已經安裝某個安裝包：三、shell判斷檔案或者資料夾是否存在四、在拷貝操作中直接覆蓋不顯示提示資訊五、shell語句給以SASL_NOCANON開頭的行某一行加註釋六、echo中的轉義換行符列印彩色字型、彩色背景七、s

jsp連線oracle資料庫並實現簡單登入功能，來自網路，部分修改。(亞信聯創實習)

共三個頁面：login.jsp、loginconf.jsp、loginsucess.jsp 使用者首先開啟login.jsp輸入使用者名稱及密碼，此時login.jsp會將輸入的使用者名稱及密碼提交到loginconf.jsp loginconf.jsp通過初始化連線資料庫

實現簡單購物車功能

說明：選擇需要購買的物品，計算總價。 <!DOCTYPE html> <html> <head></body> <link href="sohud