HTML5 Canvas로 구현된 드로잉 보드-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML5 Canvas로 구현된 드로잉 보드

阿神

Nov 08, 2016 pm 02:26 PM

canvashtml5화판

可通过按钮改变画笔的颜色及大小，还可将画布保存为图片在下面进行显示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DEMO6：自定义画板</title>
</head>
<body>
<canvas id="canvas" width="600" height="300">
    浏览器不支持canvas   <!-- 如果不支持会显示这段文字 -->
</canvas>
<br/>
<button style="width:80px;background-color:yellow;" onclick=&#39;linecolor="yellow";&#39;>YELLOW</button>
<button style="width:80px ;background-color:red;" onclick=&#39;linecolor="red";&#39;>RED</button>
<button style="width:80px ;background-color:blue;" onclick=&#39;linecolor="blue";&#39;>BLUE</button>
<button style="width:80px ;background-color:green;" onclick=&#39;linecolor="green";&#39;>GREEN</button>
<button style="width:80px ;background-color:white;" onclick=&#39;linecolor="white";&#39;>WHITE</button>
<button style="width:80px ;background-color:black;" onclick=&#39;linecolor="black";&#39;>BLACK</button>
<br/>
 
<button style="width: 80px;background-color: white;" onclick="linw=4;">4PX</button>
<button style="width: 80px;background-color: white;" onclick="linw=8;">8PX</button>
<button style="width: 80px;background-color: white;" onclick="linw=16;">16PX</button>
<br/>
 
<button style="width: 80px;background-color: white;" onclick="copyimage();">EXPORT</button>
 
<br/>
<img  src="/static/imghwm/default1.png"  data-src="" id="  class="lazy"   id="image_png"    style="max-width:90%" height="300px" alt="HTML5 Canvas로 구현된 드로잉 보드" >
<br/>
 
<script type="text/javascript">
    var canvas = document.getElementById(&#39;canvas&#39;);  //获取标签
    var ctx = canvas.getContext("2d");  
 
    var fillStyle = "black";
    ctx.fillRect(0,0,600,300);
    var onoff = false;  //按下标记
    var oldx = -10;
    var oldy = -10;
    //设置颜色
    var linecolor = "white";
    var linw = 4;
    canvas.addEventListener("mousemove",draw,true);  //鼠标移动事件
    canvas.addEventListener("mousedown",down,false);  //鼠标按下事件
    canvas.addEventListener("mouseup",up,false);  //鼠标弹起事件
    function down(event){
        onoff = true;
        oldx = event.pageX - 10;
        oldy = event.pageY - 10;
    }
    function up(){
        onoff = false;
    }
    function draw(event){
        if (onoff==true) {
            var newx = event.pageX - 10;
            var newy = event.pageY - 10
            ctx.beginPath();
            ctx.moveTo(oldx,oldy);
            ctx.lineTo(newx,newy);
            ctx.strokeStyle = linecolor;
            ctx.lineWidth = linw;
            ctx.lineCap = "round";
            ctx.stroke();
 
            oldx = newx;
            oldy = newy;
        }
    }
    function copyimage(event)
    {
        var img_png_src = canvas.toDataURL("image/png");  //将画板保存为图片格式的函数
        document.getElementById("image_png").src = img_png_src;
    }
     
    </script> 
</body>
</html>

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

html5是什么意思Apr 26, 2021 pm 03:02 PM

html5是指超文本标记语言（HTML）的第五次重大修改，即第5代HTML。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。

html5为什么只需要写doctypeJun 07, 2022 pm 05:15 PM

因为html5不基于SGML（标准通用置标语言），不需要对DTD进行引用，但是需要doctype来规范浏览器的行为，也即按照正常的方式来运行，因此html5只需要写doctype即可。“!DOCTYPE”是一种标准通用标记语言的文档类型声明，用于告诉浏览器编写页面所用的标记的版本。

See all articles

핫 AI 도구

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는