interface Webjs tutorielCode d'effet de planche à dessin simple JS basé sur le plug-in ocanvas (avec téléchargement du code source de démonstration)_compétences javascript
L'exemple de cet article décrit l'effet simple de planche à dessin implémenté par JS basé sur le plug-in ocanvas. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Utiliser ocanvas pour créer une simple planche à dessin en ligne.
Référence ocanvas : http://ocanvas.org/
L'effet est le suivant :
Le code principal est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>oCanvas Example</title>
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="http://libs.useso.com/js/zepto/1.1.3/zepto.min.js"></script>
<script>
var line_color = '#000';
var line_size = 3;
$(function(){
$('.tool .color div').click(function(){
$('.tool .color div').removeClass('active');
$(this).addClass('active');
line_color = $(this).data('color');
mouseDot.fill = line_color;
});
$('.tool .size div').click(function(){
$('.tool .size div').removeClass('active');
$(this).addClass('active');
line_size = $(this).data('size');
mouseDot.radius = Math.max(line_size / 2, 3);
});
});
</script>
<style>
body, html {padding:0; margin:0; overflow:hidden;}
.tool{position:absolute; top:10px; left:10px; border:solid 1px #aaa; background-color:#eee; border-radius:5px; padding-right:5px;}
.tool .color {float:left; margin:5px; width:30px;}
.tool .color div{width:24px; height:24px; border:solid 2px #aaa; margin-bottom:5px; opacity:0.5;}
.tool .color div:hover{opacity:1; cursor:pointer;}
.tool .color .active{opacity:1; border:solid 2px #000;}
.tool .size {float:left; margin:5px; width:30px; margin-left:0;}
.tool .size div{width:30px; height:30px; border:solid 2px #aaa; margin-bottom:5px; opacity:0.5;}
.tool .size div:hover{opacity:1; cursor:pointer;}
.tool .size .active{opacity:1; border:solid 2px #000;}
.tool .size span{display:block; margin:3px auto; height:24px; background-color:black;}
.btn {clear:both; margin-bottom:5px; text-align:center;}
.btn input {padding:3px 15px;}
</style>
</head>
<body>
<canvas id="canvas" width="200" height="100"></canvas>
<div class="tool">
<div class="color">
<div style="background:#000;" data-color="#000" class="active"></div>
<div style="background:#f00;" data-color="#f00"></div>
<div style="background:#0f0;" data-color="#0f0"></div>
<div style="background:#00f;" data-color="#00f"></div>
<div style="background:#ff0;" data-color="#ff0"></div>
<div style="background:#0ff;" data-color="#0ff"></div>
<div style="background:#f0f;" data-color="#f0f"></div>
<div style="background:#fff;" data-color="#fff"></div>
</div>
<div class="size">
<div class="active" data-size="3" ><span style="width:3px;" ></span></div>
<div data-size="6" ><span style="width:6px;" ></span></div>
<div data-size="9" ><span style="width:9px;" ></span></div>
<div data-size="12"><span style="width:12px;"></span></div>
<div data-size="15"><span style="width:15px;"></span></div>
<div data-size="20"><span style="width:20px;"></span></div>
<div data-size="25"><span style="width:25px;"></span></div>
</div>
<div class="btn">
<input type="button" value="清 空" onclick="clearAll();" />
</div>
</div>
<script src="js/ocanvas-2.7.3.min.js"></script>
<script>
var c = document.querySelector("#canvas"),
ctx = c.getContext("2d");
c.width = window.innerWidth;
c.height = window.innerHeight;
c.addEventListener("touchmove", function (e) { e.preventDefault(); }, false);
var cs = oCanvas.create({
canvas: "#canvas",
background: "#fff",
fps: 30,
disableScrolling: true
});
var isDraw = false;
var xx = 0;
var yy = 0;
var mouseDot;
clearAll();
cs.bind('mousedown', function(){
drawBegin(cs.mouse.x, cs.mouse.y);
}).bind('touchstart tap', function(){
drawBegin(cs.touch.x, cs.touch.y);
}).bind('mouseup touchend', function(){
isDraw = false;
}).bind('mousemove', function(){
drawMove(cs.mouse.x, cs.mouse.y);
}).bind('touchmove', function(){
drawMove(cs.touch.x, cs.touch.y);
});
/*
cs.setLoop(function () {
mouseDot.x = cs.mouse.x;
mouseDot.y = cs.mouse.y;
}).start();
*/
function drawBegin(x, y)
{
isDraw = true;
xx = x;
yy = y;
var dot = cs.display.arc({
x: x,
y: y,
radius: line_size / 2,
start: 0,
end: 360,
fill: line_color
});
cs.addChild(dot);
}
function drawMove(x, y)
{
if (isDraw)
{
var line = cs.display.line({
start: { x: xx, y: yy },
end: { x: x, y: y },
stroke: '' + line_size + 'px ' + line_color,
cap: "round"
});
cs.addChild(line);
xx = x;
yy = y;
}
else
{
mouseDot.moveTo(x, y);
cs.addChild(mouseDot);
cs.draw.redraw();
}
}
function clearAll()
{
cs.reset();
// 处理鼠标
cs.mouse.hide();
mouseDot = cs.display.arc({
x: -100,
y: -100,
radius: Math.max(line_size / 2, 3),
start: 0,
end: 360,
fill: line_color,
shadow: '0 0 5px #333'
});
cs.addChild(mouseDot);
}
</script>
</body>
</html>
Les lecteurs intéressés par davantage de contenu lié à JavaScript peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets et techniques de commutation JavaScript", "Résumé des techniques d'algorithme de recherche JavaScript", "Résumé des effets spéciaux et techniques d'animation JavaScript", "Résumé des erreurs JavaScript et des compétences de débogage", "Résumé des structures de données JavaScript et des techniques d'algorithme", "Résumé des algorithmes et techniques de traversée JavaScript" et "Résumé de l'utilisation des opérations mathématiques JavaScript"
Cliquez ici pour un exemple de code completTéléchargez depuis ce site.
J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.
Types de données JavaScript: Y a-t-il une différence entre le navigateur et les nodejs?May 14, 2025 am 12:15 AMLes types de données de base JavaScript sont cohérents dans les navigateurs et Node.js, mais sont gérés différemment des types supplémentaires. 1) L'objet global est la fenêtre du navigateur et global dans Node.js. 2) Objet tampon unique de Node.js, utilisé pour traiter les données binaires. 3) Il existe également des différences dans les performances et le traitement du temps, et le code doit être ajusté en fonction de l'environnement.
Commentaires JavaScript: un guide pour utiliser // et / * * /May 13, 2025 pm 03:49 PMJavascriptUsestwotypesofComments: unique (//) et multi-ligne (//). 1) use // forquicknotesorsings-lineexplanations.2) use // forlongErexPlanationsorcommentingoutblocksofcode.commentsShouldExplatethe'why ', notthewat', et bplacedabovovereLantCodeForCaReric
Python vs JavaScript: une analyse comparative pour les développeursMay 09, 2025 am 12:22 AMLa principale différence entre Python et JavaScript est le système de type et les scénarios d'application. 1. Python utilise des types dynamiques, adaptés à l'informatique scientifique et à l'analyse des données. 2. JavaScript adopte des types faibles et est largement utilisé pour le développement frontal et complet. Les deux ont leurs propres avantages dans la programmation asynchrone et l'optimisation des performances, et doivent être décidées en fonction des exigences du projet lors du choix.
Python vs JavaScript: Choisir le bon outil pour le travailMay 08, 2025 am 12:10 AMQue ce soit pour choisir Python ou JavaScript dépend du type de projet: 1) Choisissez Python pour les tâches de science et d'automatisation des données; 2) Choisissez JavaScript pour le développement frontal et complet. Python est favorisé pour sa bibliothèque puissante dans le traitement et l'automatisation des données, tandis que JavaScript est indispensable pour ses avantages dans l'interaction Web et le développement complet.
Python et Javascript: comprendre les forces de chacunMay 06, 2025 am 12:15 AMPython et JavaScript ont chacun leurs propres avantages, et le choix dépend des besoins du projet et des préférences personnelles. 1. Python est facile à apprendre, avec une syntaxe concise, adaptée à la science des données et au développement back-end, mais a une vitesse d'exécution lente. 2. JavaScript est partout dans le développement frontal et possède de fortes capacités de programmation asynchrones. Node.js le rend adapté au développement complet, mais la syntaxe peut être complexe et sujet aux erreurs.
Core de JavaScript: est-il construit sur C ou C?May 05, 2025 am 12:07 AMJavascriptisnotbuiltoncorc; il est en interprétéLanguageThatrunSoninesoftenwritteninc .1) javascriptwasdesignedasalightweight, interprété de LanguageForwebbrowsers.2) EnginesevolvedFromSimpleInterpreterstoJitCompilers, typicalinc, impropringperformance.
Applications JavaScript: de front-end à back-endMay 04, 2025 am 12:12 AMJavaScript peut être utilisé pour le développement frontal et back-end. L'endouage frontal améliore l'expérience utilisateur via les opérations DOM, et le back-end gère les tâches du serveur via Node.js. 1. Exemple frontal: modifiez le contenu du texte de la page Web. 2. Exemple backend: Créez un serveur Node.js.
Python vs JavaScript: Quelle langue devez-vous apprendre?May 03, 2025 am 12:10 AMLe choix de Python ou JavaScript doit être basé sur le développement de carrière, la courbe d'apprentissage et l'écosystème: 1) le développement de carrière: Python convient à la science des données et au développement de back-end, tandis que JavaScript convient au développement frontal et complet. 2) Courbe d'apprentissage: la syntaxe Python est concise et adaptée aux débutants; La syntaxe JavaScript est flexible. 3) Ecosystème: Python possède de riches bibliothèques informatiques scientifiques, et JavaScript a un puissant cadre frontal.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
SublimeText3 version anglaise
Recommandé : version Win, prend en charge les invites de code !
PhpStorm version Mac
Le dernier (2018.2.1) outil de développement intégré PHP professionnel
Adaptateur de serveur SAP NetWeaver pour Eclipse
Intégrez Eclipse au serveur d'applications SAP NetWeaver.
Navigateur d'examen sécurisé
Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.
Version Mac de WebStorm
Outils de développement JavaScript utiles
