canvas离线画板画图

在线效果地址

离线画板画图

画板代码

<html><head><title>You are not connected to the Internet</title><meta property="og:url" content="https://dev.to/offline.html"><meta property="og:title" content="Looks like you've lost your Internet connection"><meta property="og:image" content="https://thepracticaldev.s3.amazonaws.com/i/aio6nc08tpcqavej512d.png"><meta property="og:description" content="Maybe you could go outside and get some fresh air."><meta property="og:site_name" content="The DEV Community"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@ThePracticalDev"><meta name="twitter:title" content="Looks like you've lost your Internet connection"><meta name="twitter:description" content="Maybe you could go outside and get some fresh air."><meta name="twitter:image:src" content="https://thepracticaldev.s3.amazonaws.com/i/aio6nc08tpcqavej512d.png"><style>html,body,canvas {height: 100%;width: 100%;margin: 0;font-family: Helvetica;user-select: none;}body {display: flex;justify-content: center;align-items: center;flex-direction: column;color: #444444;}h2,h3 {font-weight: 400;}h2 {font-size: 2em;}h3 {font-size: 1.3em;}canvas {position: fixed;top: 0;width: 100%;height: 100vh;}path {opacity: 50%;}.content {text-align: center;margin: 20px 20px;}.paletteSelector {z-index: 2;margin-top: 30px;}.colors {z-index: 2;margin: 0 20px;text-align: center;}.color {height: 50px;width: 50px;margin-right: 10px;border-radius: 50%;border: none;}.color:hover {opacity: .7;cursor: pointer;}.color:focus {outline: 0;}.rainbow-logo {border-radius: 10%;max-width: 40%;max-height: 400px;}.signature {margin-top: 20px;}#footer-container {display: none;}@media only screen and (max-height: 700px) {h2 {font-size: 1.5em;}h3 {font-size: 1.0em;}.color {height: 30px;width: 30px;}.signature {margin-top: 10px;margin-bottom: 10px;}.content {margin-bottom: 10px;}}</style>
</head><body><canvas width="1920" height="213"></canvas><div class="content"><svg viewBox="0 0 235 234" version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" class="rainbow-logo" preserveAspectRatio="xMinYMin meet"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="80K"><polygon id="Shape" fill="#88AEDC" points="234.04 175.67 158.35 233.95 205.53 233.95 234.04 212"></polygon><polygon id="Shape" points="234.04 140.06 112.11 233.95 112.13 233.95 234.04 140.08"></polygon><polygon id="Shape" points="133.25 0.95 0.04 103.51 0.04 103.53 133.27 0.95"></polygon><polygon id="Shape" fill="#F58F8E" fill-rule="nonzero" points="0.04 0.95 0.04 31.11 39.21 0.95"></polygon><polygon id="Shape" fill="#FEE18A" fill-rule="nonzero"points="39.21 0.95 0.04 31.11 0.04 67.01 85.84 0.95"></polygon><polygon id="Shape" fill="#F3F095" fill-rule="nonzero"points="85.84 0.95 0.04 67.01 0.04 103.51 133.25 0.95"></polygon><polygon id="Shape" fill="#55C1AE" fill-rule="nonzero"points="133.27 0.95 0.04 103.53 0.04 139.12 179.49 0.95"></polygon><polygon id="Shape" fill="#F7B3CE" fill-rule="nonzero"points="234.04 0.95 226.67 0.95 0.04 175.45 0.04 211.38 234.04 31.2"></polygon><polygon id="Shape" fill="#88AEDC" fill-rule="nonzero"points="179.49 0.95 0.04 139.12 0.04 175.45 226.67 0.95"></polygon><polygon id="Shape" fill="#F58F8E" fill-rule="nonzero"points="234.04 31.2 0.04 211.38 0.04 233.95 18.07 233.95 234.04 67.65"></polygon><polygon id="Shape" fill="#FEE18A" fill-rule="nonzero"points="234.04 67.65 18.07 233.95 64.7 233.95 234.04 103.56"></polygon><polygon id="Shape" fill="#F3F095" fill-rule="nonzero"points="234.04 103.56 64.7 233.95 112.11 233.95 234.04 140.06"></polygon><polygon id="Shape" fill="#55C1AE" fill-rule="nonzero"points="234.04 140.08 112.13 233.95 158.35 233.95 234.04 175.67"></polygon><polygon id="Shape" fill="#F7B3CE" fill-rule="nonzero"points="234.04 212 205.53 233.95 234.04 233.95"></polygon><g id="Group" transform="translate(37.000000, 77.000000)" fill="#FFFFFF"><pathd="M28.2371517,0.75 C32.7510836,1.7 36.0111455,3.55 39.371517,7.05 C42.4309598,10.25 44.3368421,13.9 45.1393189,18 C45.7913313,21.45 45.7913313,58.55 45.1393189,62.05 C43.4340557,71.15 35.6600619,78.25 26.0303406,79.5 C24.0241486,79.75 17.3034056,80 11.1845201,80 L-7.10542736e-15,80 L-7.10542736e-15,1.42108547e-14 L12.4383901,1.42108547e-14 C21.2656347,1.42108547e-14 25.7795666,0.2 28.2371517,0.75 Z M14.5448916,40 L14.5448916,65.6 L19.7108359,65.4 C24.174613,65.25 25.1275542,65.05 27.1337461,63.9 C31.0458204,61.6 31.0959752,61.45 31.0959752,39.7 C31.0959752,18.5 31.0959752,18.5 27.4346749,16.1 C25.6291022,14.9 24.8767802,14.75 19.9616099,14.55 L14.5448916,14.4 L14.5448916,40 Z"id="Combined-Shape"></path><pathd="M93.7894737,7.25 L93.7894737,14.5 L68.2105263,14.5 L68.2105263,32.5 L83.7585139,32.5 L83.7585139,47 L68.2105263,47 L68.3108359,56.1 L68.4613003,65.25 L81.1504644,65.4 L93.7894737,65.5 L93.7894737,80 L78.993808,80 C62.5430341,80 59.9851393,79.7 57.3770898,77.4 C53.7157895,74.2 53.9164087,76.25 53.7659443,41.1 C53.6656347,19.2 53.8160991,8.85 54.1671827,7.45 C54.8693498,4.85 57.828483,1.65 60.4365325,0.75 C61.9913313,0.2 65.9034056,0.05 78.1411765,4.26325641e-14 L93.7894737,4.26325641e-14 L93.7894737,7.25 Z"id="Path"></path><pathd="M125.437152,28.1 C129.148607,42.35 132.258204,53.7 132.358514,53.35 C132.508978,53 135.668731,40.95 139.430341,26.5 L146.301548,0.25 L154.125697,0.1 C160.043963,7.10542736e-15 162,0.15 162,0.6 C162,1.05 144.64644,66.8 143.643344,70.1 C142.941176,72.4 139.179567,77.1 137.073065,78.35 C134.414861,79.85 130.502786,80.1 128.095356,78.85 C125.9387,77.75 123.079876,74.45 121.625387,71.35 C120.722601,69.45 105.97709,15.35 102.566563,1.35 L102.21548,0 L110.039628,0 C117.713313,0 117.913932,0 118.31517,1.1 C118.515789,1.75 121.725697,13.9 125.437152,28.1 Z"id="Path"></path></g></g></g></svg><h2> So, there's good news and bad news</h2><h3>Bad news: It looks like you're offline</h3><h3>Good news: You can draw a picture anywhere on this page while you wait to get it back!</h3><h4>(pick a color below &amp;&amp; start drawing!)</h4></div><div class="colors" style="pointer-events: all;"><button class="color"style="background-color: rgb(244, 144, 142);"></button><button class="color"style="background-color: rgb(242, 240, 151);"></button><button class="color"style="background-color: rgb(136, 176, 220);"></button><button class="color"style="background-color: rgb(247, 181, 209);"></button><button class="color"style="background-color: rgb(83, 196, 175);"></button><button class="color"style="background-color: rgb(253, 227, 140);"></button></div><div class="paletteSelector" style="pointer-events: all;"><!-- TODO: Populate options from javascript instead of hardcoding --><select><option value="default">Default Palette</option><option value="paulTol">Paul Tol Palette</option></select></div><svg width="75px" height="75px" viewBox="0 0 266 286" version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" class="signature"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Artboard-3" transform="translate(-66.000000, -39.000000)" stroke="#F4908E" stroke-width="8"><g id="Group" transform="translate(70.000000, 44.000000)"><pathd="M137.947881,11.0969119 C120.236214,10.7929621 127.259584,-4.63518682 110.600707,1.39809583 C98.4900537,5.78416547 5.38963223,31.9682026 1.99251552,84.34539 C0.138615017,112.929069 -0.563473858,141.639852 0.495802997,170.264134 C0.973626724,183.176113 16.3154795,204.585393 22.2134768,211.816457 C35.0843735,227.596436 61.6452079,206.201192 70.9197071,196.000824 C104.380023,159.200179 133.244668,118.47588 137.947881,67.1534449 C138.600896,60.027607 145.952931,5.41350351 126.011684,11.0969119 C112.376346,14.9830876 103.436568,65.3726702 102.950719,78.3517738 C101.357143,120.922959 86.4228272,211.00328 146.955431,222.813291 C172.852291,227.865812 169.286943,226.931981 192,226.931981"id="Path-2"></path><pathd="M80,277.169785 C120.408772,252.192233 121.434199,237.685468 133.304963,222.650446 C151.591469,199.489509 173.572805,172.509583 233.39048,84.1055622 C240.794147,73.1637472 242.286005,30.9559106 238.678367,28.2608272 C236.630233,26.7307705 219.030597,13.826187 211.887732,18.9306581 C202.734845,25.4715418 203.241886,57.600262 203.223682,60.0372493 C203.010014,88.6406571 203.914879,117.248834 205.052575,145.830265 C206.126657,172.81357 211.080162,198.940616 208.995298,226.072378 C206.84232,254.090552 155.519583,271.514023 133.304963,268.076421 C126.954422,267.093706 93.5574761,243.825981 102.987596,240.93683 C113.776095,237.631506 146.615548,245.587641 160.390474,240.93683 C174.165399,236.286019 182.361602,234.057591 192.833448,229.336442 C203.454817,224.547881 249.685075,198.800486 259.8975,193.187538"id="Path-3"></path></g></g></g></svg><script type="text/javascript">const palettes = {default: ["#F4908E", "#F2F097", "#88B0DC", "#F7B5D1", "#53C4AF", "#FDE38C"],// Color-deficient accessible palettes: https://owi.usgs.gov/blog/tolcolors/paulTol: ["#B997C6", "#824D99", "#4E79C4", "#57A2AC", "#7EB875", "#D0B440", "#E67F33"],// Add more palette options below and to the "select" dropdown.}let activePalette = 'default' // match key inside the palettes variable// Globally DOM nodes + variablesconst paletteSelector = document.querySelector(".paletteSelector")const colorSelector = document.querySelector(".colors")const canvas = document.querySelector('canvas')const context = canvas.getContext('2d')const colorDiv = document.querySelector(".colors")let dx = 1, dy = 1;// handler for color input buttonsfunction handleButtonClick(event) {const buttonStyle = event.target.stylecontext.strokeStyle = buttonStyle.backgroundColor}// Main drawing functionfunction renderColorButtons(colors) {// First, remove existing event listeners to prevent memory leakcolorDiv.querySelectorAll('button').forEach((button) => {button.removeEventListener('click', handleButtonClick)})// Then, remove existing buttonscolorDiv.innerHTML = ""// Lastly, add new a new button for each color in the passed in palettecolors.forEach(color => {const button = document.createElement("button")button.classList.add("color")button.style.backgroundColor = colorcolorDiv.appendChild(button)button.addEventListener('click', handleButtonClick)})}// Helper for modifying canvas contextconst setContextSettings = (strokeColor) => {context.strokeStyle = strokeColorcontext.lineJoin = "round"context.lineWidth = 5}const setCanvasSize = () => {// set dimensions on the canvascanvas.setAttribute('width', window.innerWidth)canvas.setAttribute('height', window.innerHeight)}const setResizeFactors = () => {// set the x and y resizinf factor for cursor positiondx = canvas.width / window.innerWidthdy = canvas.height / window.innerHeight}const handleResize = () => {setCanvasSize()setResizeFactors();}window.addEventListener("resize", handleResize)// Main function to render new DOM whenever activePalette changesconst render = (palette) => {renderColorButtons(palette)setContextSettings(palette[0])setCanvasSize()}// User Input Event Handlers//----------------------------------------let firstX, firstY, secondX, secondY, paintfunction getCoordinates(event) {// check to see if mobile or desktopif (["mousedown", "mousemove"].includes(event.type)) {// click eventsreturn [event.pageX * dx, event.pageY * dy]} else {// touch coordinatesreturn [event.touches[0].pageX * dx, event.touches[0].pageY * dy]}}function addClick(event, canvas) {let [x, y] = getCoordinates(event)secondX = firstXsecondY = firstYfirstX = xfirstY = y}function draw() {context.beginPath()context.moveTo(secondX, secondY)context.lineTo(firstX, firstY)context.closePath()context.stroke()}function startPaint(event) {colorSelector.style.pointerEvents = 'none'paletteSelector.style.pointerEvents = 'none'addClick(event, this)paint = true}canvas.addEventListener('mousedown', startPaint)canvas.addEventListener('touchstart', startPaint)const exit = _ => {colorSelector.style.pointerEvents = 'all'paletteSelector.style.pointerEvents = 'all'paint = falsefirstX = nullfirstY = null}canvas.addEventListener('mouseup', exit)canvas.addEventListener('mouseleave', exit)canvas.addEventListener('touchend', exit)function endPaint(event) {if (paint) {addClick(event, this)draw()}}canvas.addEventListener('mousemove', endPaint)canvas.addEventListener('touchmove', endPaint)paletteSelector.onchange = (event) => {activePalette = event.target.valuerender(palettes[activePalette])}// Initialization when page is ready to load, runs once(function () {render(palettes[activePalette])})()</script></body></html>

canvas离线画板画图相关推荐

html5 电子白板直播,HTML5 canvas 做画板画图可以做电子白板
HTML5 canvas 做画板画图可以做电子白板 HTML5 canvas 做画板画图可以做电子白板 var canvas; var context; var tool; /** * calle ...
HTML5 canvas 做画板画图可以做电子白板
HTML5 canvas 做画板画图可以做电子白板 <html><head><meta charset="utf-8"><title&g ...
用html5做一个简单的作品,html5 canvas 简单画板实现代码
canvas简单画板 canvas简单画板提示:您可以先修改部分代码再运行
Python画板画图之美
Python画板画图之美 *turtle.done() #可让画板窗口停止* 1.绘制同切圆 pensize为画笔宽度 circle(n),n为半径大小,两者单位均为像素 import turtle ...
html5 canvas 画板 demo,html5 canvas 简单画板实现代码
canvas简单画板 #can{ width:600px; height:500px; border:1px solid #ccc; margin-top:0px; margin-left:20px; ...
java画板_java 画板画图程序
导读热词下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. import java.awt.*; import javax.swing.*; ...
巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保存
canvas 是HTML5的元素,使用JavaScript 在网页上绘制图像. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 而如果想实现画笔在画板涂画画笔在图片上涂画,橡皮擦 ...
html+js+canvas实现画板涂画功能和vue+canvas实现画板涂画功能
1,html+js+canvas实现画板涂画功能效果如下: <!DOCTYPE HTML> <html> <head><meta charset=" ...
html格子像素画,canvas像素画板的实现代码
最近项目上要实现一个类似像素风格的画板,可以像素小格子可以擦除,框选变色,可以擦出各种图形,这样一个小项目看似简单,包含的东西还真不少. 绘制像素格子我们先定义像素格子类 Pixel = funct ...

canvas离线画板画图

在线效果地址

画板代码

canvas离线画板画图相关推荐

最新文章

热门文章