search
HomeWeb Front-endH5 TutorialSupports mobile-side HTML5 Canvas realistic blackboard effects

Brief Tutorial

This is a blackboard special effect made using HTML5 Canvas. The blackboard special effect supports mobile phones. It can simulate the effect of using chalk to write on a blackboard. The blackboard special effects also have the following features:

  • Use the left mouse button to write on the blackboard.

  • Use the right mouse button to erase written words.

  • Press the space bar to clear the content on the blackboard.

  • Click the download button to save the written content as a picture and download it.

How to use

Supports mobile-side HTML5 Canvas realistic blackboard effects

JavaScript

The complete js code of the HTML5 Canvas blackboard effect is as follows:

$(document).ready(chalkboard);
 
function chalkboard(){
  $('#chalkboard').remove();
  $('.chalk').remove();
  $(&#39;body&#39;).prepend(&#39;<div class="panel"><a class="link" target="_blank">Save</a></div>&#39;);
  $(&#39;body&#39;).prepend(&#39;<img  src="/static/imghwm/default1.png"  data-src="img/bg.png"  class="lazy"   id="pattern"    style="max-width:90%"Supports mobile-side HTML5 Canvas realistic blackboard effects" >&#39;);
  $(&#39;body&#39;).prepend(&#39;<canvas id="chalkboard"></canvas>&#39;);
  $(&#39;body&#39;).prepend(&#39;<div class="chalk"></div>&#39;);
   
  var canvas = document.getElementById("chalkboard");
  $(&#39;#chalkboard&#39;).css(&#39;width&#39;,$(window).width());
  $(&#39;#chalkboard&#39;).css(&#39;height&#39;,$(window).height());
  canvas.width = $(window).width();
  canvas.height = $(window).height();
   
  var ctx = canvas.getContext("2d");
   
  var width = canvas.width;
  var height = canvas.height;
  var mouseX = 0;
  var mouseY = 0;
  var mouseD = false;
  var eraser = false;
  var xLast = 0;
  var yLast = 0;
  var brushDiameter = 7;
  var eraserWidth = 50;
  var eraserHeight = 100;
   
  $(&#39;#chalkboard&#39;).css(&#39;cursor&#39;,&#39;none&#39;);
  document.onselectstart = function(){ return false; };
  ctx.fillStyle = &#39;rgba(255,255,255,0.5)&#39;;  
  ctx.strokeStyle = &#39;rgba(255,255,255,0.5)&#39;;  
    ctx.lineWidth = brushDiameter;
  ctx.lineCap = &#39;round&#39;;
 
  var patImg = document.getElementById(&#39;pattern&#39;);
 
  document.addEventListener(&#39;touchmove&#39;, function(evt) {
        var touch = evt.touches[0];
        mouseX = touch.pageX;
        mouseY = touch.pageY;
        if (mouseY < height && mouseX < width) {
            evt.preventDefault();
            $(&#39;.chalk&#39;).css(&#39;left&#39;, mouseX + &#39;px&#39;);
            $(&#39;.chalk&#39;).css(&#39;top&#39;, mouseY + &#39;px&#39;);
            //$(&#39;.chalk&#39;).css(&#39;display&#39;, &#39;none&#39;);
            if (mouseD) {
                draw(mouseX, mouseY);
            }
        }
    }, false);
    document.addEventListener(&#39;touchstart&#39;, function(evt) {
        //evt.preventDefault();
        var touch = evt.touches[0];
        mouseD = true;
        mouseX = touch.pageX;
        mouseY = touch.pageY;
        xLast = mouseX;
        yLast = mouseY;
        draw(mouseX + 1, mouseY + 1);
    }, false);
    document.addEventListener(&#39;touchend&#39;, function(evt) {
        mouseD = false;
    }, false);
    $(&#39;#chalkboard&#39;).css(&#39;cursor&#39;,&#39;none&#39;);
  ctx.fillStyle = &#39;rgba(255,255,255,0.5)&#39;;  
  ctx.strokeStyle = &#39;rgba(255,255,255,0.5)&#39;;  
    ctx.lineWidth = brushDiameter;
  ctx.lineCap = &#39;round&#39;;
   
  $(document).mousemove(function(evt){
    mouseX = evt.pageX;
    mouseY = evt.pageY;
    if(mouseY<height && mouseX<width){
      $(&#39;.chalk&#39;).css(&#39;left&#39;,(mouseX-0.5*brushDiameter)+&#39;px&#39;);
      $(&#39;.chalk&#39;).css(&#39;top&#39;,(mouseY-0.5*brushDiameter)+&#39;px&#39;);
      if(mouseD){
        if(eraser){
          erase(mouseX,mouseY);
        }else{
          draw(mouseX,mouseY);
          }
        }
    }else{
      $(&#39;.chalk&#39;).css(&#39;top&#39;,height-10);
      }
    });
  $(document).mousedown(function(evt){ 
    mouseD = true;
    xLast = mouseX;
    yLast = mouseY;
    if(evt.button == 2){
      erase(mouseX,mouseY);
      eraser = true;
      $(&#39;.chalk&#39;).addClass(&#39;eraser&#39;);
    }else{
      if(!$(&#39;.panel&#39;).is(&#39;:hover&#39;)){
        draw(mouseX+1,mouseY+1);
      }   
    }
  });
 
  $(document).mouseup(function(evt){ 
    mouseD = false;
    if(evt.button == 2){
      eraser = false;
      $(&#39;.chalk&#39;).removeClass(&#39;eraser&#39;);
    }
  });
 
  $(document).keyup(function(evt){
    if(evt.keyCode == 32){
      ctx.clearRect(0,0,width,height);
      layPattern();
    }
  });
 
  $(document).keyup(function(evt){
    if(evt.keyCode == 83){
      changeLink();
    }
  });
 
  document.oncontextmenu = function() {return false;};
          
  function draw(x,y){
    ctx.strokeStyle = &#39;rgba(255,255,255,&#39;+(0.4+Math.random()*0.2)+&#39;)&#39;;
    ctx.beginPath();
      ctx.moveTo(xLast, yLast);   
      ctx.lineTo(x, y);
      ctx.stroke();
           
      // Chalk Effect
    var length = Math.round(Math.sqrt(Math.pow(x-xLast,2)+Math.pow(y-yLast,2))/(5/brushDiameter));
    var xUnit = (x-xLast)/length;
    var yUnit = (y-yLast)/length;
    for(var i=0; i<length; i++ ){
      var xCurrent = xLast+(i*xUnit); 
      var yCurrent = yLast+(i*yUnit);
      var xRandom = xCurrent+(Math.random()-0.5)*brushDiameter*1.2;     
      var yRandom = yCurrent+(Math.random()-0.5)*brushDiameter*1.2;
        ctx.clearRect( xRandom, yRandom, Math.random()*2+2, Math.random()+1);
      }
 
    xLast = x;
    yLast = y;
  }
 
  function erase(x,y){
    ctx.clearRect (x-0.5*eraserWidth,y-0.5*eraserHeight,eraserWidth,eraserHeight);
  }
 
  $(&#39;.link&#39;).click(function(evt){
 
    $(&#39;.download&#39;).remove();
 
    var imgCanvas = document.createElement(&#39;canvas&#39;);
    var imgCtx = imgCanvas.getContext("2d");
    var pattern = imgCtx.createPattern(patImg,&#39;repeat&#39;);
 
    imgCanvas.width = width;
    imgCanvas.height = height;
 
    imgCtx.fillStyle = pattern;
    imgCtx.rect(0,0,width,height);
    imgCtx.fill();
 
 
    var layimage = new Image;
    layimage.src = canvas.toDataURL("image/png");
 
    setTimeout(function(){
 
      imgCtx.drawImage(layimage,0,0);
 
      var compimage = imgCanvas.toDataURL("image/png");//.replace(&#39;image/png&#39;,&#39;image/octet-stream&#39;);
 
      $(&#39;.panel&#39;).append(&#39;<a href="&#39;+compimage+&#39;" download="chalkboard.png" class="download">Download</a>&#39;);
      $(&#39;.download&#39;).click(function(){
        IEsave(compimage);
      });
     
    }, 500);
  });
  function IEsave(ctximage){
    setTimeout(function(){
      var win = window.open();
      $(win.document.body).html(&#39;<img  src="/static/imghwm/default1.png"  data-src="&#39;+ctximage+&#39;"  class="lazy"   name="chalkboard.png" alt="Supports mobile-side HTML5 Canvas realistic blackboard effects" >&#39;);
    },500);
  }
  $(window).resize(function(){
    chalkboard();
  });
}

The above is the content that supports the realistic blackboard effects of HTML5 Canvas on the mobile terminal. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
解决Vue移动端多触点问题解决Vue移动端多触点问题Jun 30, 2023 pm 01:06 PM

在移动端开发中,我们经常会遇到多手指触控的问题。当用户在移动设备上使用多个手指滑动或缩放屏幕时,如何准确地识别和响应这些手势是一个重要的开发难题。在Vue开发中,我们可以采取一些措施来解决移动端多手指触控问题。一、使用vue-touch插件vue-touch是一个用于Vue的手势插件,它可以方便地处理移动端的多手指触控事件。我们可以通过npm安装vue-to

Vue开发中如何解决移动端双击放大问题Vue开发中如何解决移动端双击放大问题Jun 29, 2023 am 11:06 AM

随着移动端设备的普及,使用Vue进行移动端开发已经成为了常见的选择。然而,我们在移动端开发过程中经常会面临一个问题,就是双击放大。本文将针对这一问题,探讨在Vue开发中如何解决移动端双击放大的具体方法。移动端双击放大问题的出现,主要是因为移动设备在触摸屏上进行双击操作时,会自动放大网页的缩放比例。对于一般的网页开发来说,这种双击放大通常是有好处的,因为它可以

使用Python和百度地图API实现移动端地图定位功能的方法使用Python和百度地图API实现移动端地图定位功能的方法Jul 29, 2023 pm 11:33 PM

使用Python和百度地图API实现移动端地图定位功能的方法随着移动互联网的发展,地图定位功能在移动端应用中变得越来越常见。Python作为一种流行的编程语言,也可以通过使用百度地图API来实现移动端地图定位功能。下面将介绍使用Python和百度地图API实现地图定位功能的步骤,并提供相应的代码示例。步骤一:申请百度地图API密钥在开始之前,我们首先需要申请

Vue开发:优化移动端手势缩放卡顿问题Vue开发:优化移动端手势缩放卡顿问题Jun 30, 2023 pm 04:33 PM

Vue开发中如何解决移动端手势缩放页面卡顿问题近年来,移动端应用的普及使得手势操作成为用户交互的重要方式。在Vue开发中,实现移动端手势缩放功能往往会遇到页面卡顿的问题。本文将探讨如何解决这一问题,并提供一些优化策略。了解手势缩放原理在解决问题之前,我们首先需要了解手势缩放的原理。手势缩放通过监听触摸事件来实现,当用户用两个手指滑动屏幕时,页面会按照手指的滑

Vue实现移动端响应式布局的完整指南(Vant)Vue实现移动端响应式布局的完整指南(Vant)Jun 09, 2023 pm 04:09 PM

Vue实现移动端响应式布局的完整指南(Vant)移动端响应式布局是现代Web开发中非常重要的一环,随着移动设备的普及,如何快速响应用户手机屏幕的大小和分辨率,成为了前端工程师必须面对的挑战之一。Vue框架自带响应式布局的特性,同时也有不少第三方库来帮助我们实现响应式布局。其中,Vant组件库是一款Vue移动端UI库,因其十分强大、易用和定制化,并且完全符合移

如何处理PHP表单中的移动端和响应式设计如何处理PHP表单中的移动端和响应式设计Aug 10, 2023 am 11:51 AM

如何处理PHP表单中的移动端和响应式设计随着移动设备的普及和使用频率的增加,以及越来越多的用户使用移动设备访问网站,适配移动端成为了一个重要的问题。在处理PHP表单时,我们需要考虑如何实现移动端友好的界面和响应式设计。本文将介绍如何处理PHP表单中的移动端和响应式设计,并提供代码示例。1.使用HTML5的响应式表单HTML5提供了一些新特性,可以方便地实现响

如何使用PHP生成可用于移动端的二维码?如何使用PHP生成可用于移动端的二维码?Aug 26, 2023 pm 02:51 PM

如何使用PHP生成可用于移动端的二维码?随着移动互联网的快速发展,二维码成为了商家推广、支付、活动等方方面面的重要工具。而使用PHP生成可用于移动端的二维码则成为了许多开发人员的需求。在本文中,我们将介绍如何使用PHP生成可用于移动端的二维码,并附上代码示例供参考。首先,我们需要先安装并引入一个PHP库,名为"endroid/qr-code"。这个库提供了一

Vue移动端消除点击穿透问题的解决方案Vue移动端消除点击穿透问题的解决方案Jul 01, 2023 am 08:27 AM

Vue开发中如何解决移动端点击穿透问题移动端上经常会遇到点击穿透的问题,即用户在快速点击元素时,由于点击事件的执行时间较长,下一个元素会被穿透点击。这在开发中会造成一系列的问题,例如多次触发事件、页面跳转错误等。针对这个问题,Vue提供了几种解决方案。一、使用FastClick库FastClick是一个能够消除click事件在移动端300ms的延迟库。安装和

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.