Une faible connaissance de beginpath () provoque une superposition de style lors de la peinture d'un dessin en toile

Lucaslin 2021-09-15 04:52:54
une faible connaissance beginpath provoque


Écrivez cet article,C'est parce que canvas Lors du dessin,J'ai rencontré un problème:Lors du dessin,Styles graphiques définis plus loin(Couleur、Poids de ligne, etc.)Superposition du style du dessin précédent.Par la recherche,La découverte est juste canvas La méthode pertinente pour tracer le cheminbeginPath()Ce n'est pas une compréhension profonde qui,Notez ici que,J'espère que les chaussures pour enfants qui rencontrent le même problème!

On trouvera ci - après des exemples illustrant.

Adoption fillRect() Dessiner un rectangle

const canvas_a = document.getElementById('canvas_a');
const ctx_a = canvas_a.getContext('2d');
ctx_a.fillStyle = '#2DE0A5'; // Vert
ctx_a.fillRect(10, 10, 80, 40);
ctx_a.fillStyle = '#03a9f4'; // Bleu
ctx_a.fillRect(10, 60, 80, 40);
Copier le Code

image.png

Adoption rect() Dessiner un rectangle(Mauvaise écriture)

const canvas_b = document.getElementById('canvas_b');
const ctx_b = canvas_b.getContext('2d');
ctx_b.fillStyle = '#2DE0A5'; // Vert
ctx_b.rect(10, 10, 80, 40);
ctx_b.fill();
ctx_b.fillStyle = '#03a9f4'; // Bleu
ctx_b.rect(10, 60, 80, 40);
ctx_b.fill();
Copier le Code

image.png

Découverte」: Le style que vous définissez lorsque vous dessinez le deuxième rectangle (Bleu) Style superposé au premier rectangle (Vert)

Cité ici《 Red Treasure Book 》 Les mots pertinents dans le livre expliquent :

  • Le rectangle est le seul qui Direct In 2D Formes dessinées dans le contexte du dessin . Les méthodes associées au dessin d'un rectangle sont 3 - Oui.:fillRect()、strokeRect()Et clearRect().

  • Pour tracer le chemin , Vous devez d'abord appeler beginPath() Méthode pour indiquer que vous souhaitez commencer à dessiner Nouveau chemin.

  • rect() Méthodes et strokeRect() Et fillRect()La différence est que, Il crée un chemin , Au lieu de graphiques séparés .

Adoption rect() Dessiner un rectangle(La bonne écriture)

const canvas_c = document.getElementById('canvas_c');
const ctx_c = canvas_c.getContext('2d');
ctx_c.beginPath(); // L'appel indique un nouveau chemin 
ctx_c.fillStyle = '#2DE0A5';
ctx_c.rect(10, 10, 80, 40);
ctx_c.fill();
ctx_c.beginPath(); // L'appel indique un nouveau chemin 
ctx_c.fillStyle = '#03a9f4';
ctx_c.rect(10, 60, 80, 40);
ctx_c.fill();
Copier le Code

image.png

Dessiner des lignes(Mauvaise écriture)

const canvas_x = document.getElementById('canvas_x');
const ctx_x = canvas_x.getContext('2d');
ctx_x.lineWidth = 15;
ctx_x.strokeStyle = '#2DE0A5';
ctx_x.moveTo(20, 20);
ctx_x.lineTo(120, 20);
ctx_x.stroke();
ctx_x.strokeStyle = '#03a9f4';
ctx_x.moveTo(20, 60);
ctx_x.lineTo(120, 60);
ctx_x.stroke();
Copier le Code

image.png

Dessiner des lignes(La bonne écriture)

const canvas_x = document.getElementById('canvas_x');
const ctx_x = canvas_x.getContext('2d');
ctx_x.lineWidth = 15;
ctx_x.beginPath(); // L'appel indique un nouveau chemin 
ctx_x.strokeStyle = '#2DE0A5';
ctx_x.moveTo(20, 20);
ctx_x.lineTo(120, 20);
ctx_x.stroke();
ctx_x.beginPath(); // L'appel indique un nouveau chemin 
ctx_x.strokeStyle = '#03a9f4';
ctx_x.moveTo(20, 60);
ctx_x.lineTo(120, 60);
ctx_x.stroke();
Copier le Code

image.png


Pour des raisons spécifiques, Voir quelqu'un dire que c'est canvas Chaque dessin redessine tout le contenu de la toile , Pour en savoir plus o(╥﹏╥)o ! Les grands hommes que vous voyez sont les bienvenus pour dissiper les doutes ^v^

版权声明
本文为[Lucaslin]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/09/20210914174203457u.html

  1. Vue bidirectional binding (V-model bidirectional binding,. Sync bidirectional binding,. Sync transfer object)
  2. Vue3.0 using Gaode map to obtain longitude and latitude information
  3. React realizes the function of copying pictures with one click
  4. White space, word break and word wrap are the three most basic and confusing attributes in CSS - thoroughly understand
  5. Trois ans d'expérience d'entrevue avec une femme de programmation diplômée, une réflexion sur la cohérence de l'expiration des données de redis Master slave Node,
  6. Résumé de l'entrevue Android de Dachang, carte technique Android
  7. Un plan de carrière Java correct, découvrez les questions que vous devez poser lors de l'entrevue d'embauche du printemps Java de cette année.
  8. Le résumé de l'entrevue Android de Dachang est en retard
  9. Un article vous a appris à gérer les entrevues sur le Web, à partager 350 vraies questions d'entrevue Java,
  10. Jquery Tools Methodology collation, Sharing a little interview Experience
  11. Jquery plug - in urianchor, app front end Development
  12. $in jquery, Visualized Web Development Tool
  13. Le développement Java doit être fait. Les entrevues https demandent souvent une analyse complète.
  14. vue v-if未生效问题
  15. vue动态改变组件外部元素样式
  16. Jdk's Past Life: The Classic Features of Thin Number - java5 - - - 15 -, webfront Development
  17. Résumé des questions d'entrevue pour les ingénieurs en développement Java, analyse des questions d'entrevue à haute fréquence Dubbo,
  18. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  19. A Simple Css Meun
  20. Vue modifier dynamiquement le style de l'élément externe du composant
  21. Vue V - si problème non valable
  22. N'osez pas vous opposer à l'intervieweur et obtenir des commentaires personnels des stagiaires d'offer Ali après cinq rondes d'entrevue.
  23. Améliorer continuellement leur capacité à créer des primes, et les questions d'entrevue Java d'Alibaba Huawei Tencent et d'autres grandes usines sont sautées en octets.
  24. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  25. Who doesn't want to make a scratch music by himself? Scratch music is realized by native JS
  26. Learn XPath to help climb the data of major e-commerce platforms in the Mid Autumn Festival
  27. vue動態改變組件外部元素樣式
  28. vue v-if未生效問題
  29. Je ne comprends pas comment la machine virtuelle JVM peut encore interviewer, et j'ai terminé ce dictionnaire d'entrevue Java de 1307 pages.
  30. Dongxh, mid autumn festival gifts 🥮, [CSS starry sky realization, Mid Autumn Festival poem]
  31. What if you want to see the moon and don't want to go out
  32. Mid Autumn Festival, Chang'e looks at the moon
  33. Mid Autumn Festival special! Use the simplest animation animation to make the most local and trendy holiday blessing greeting card. This romantic male and female tears of Xiao Chen.
  34. [Pixi] super beautiful! How to make mid autumn festival scene level animation!!
  35. Echarts realizes the rotation of the moon (super simple, you can see it at a glance)
  36. Dart mixin full resolution
  37. Some suggestions on Vue code readability | comments are rewarded
  38. 120 lines of code to achieve pure web video editing
  39. Yang yangsun took a selfie to celebrate his 30th birthday, and Wang Yanlin sent blessings.
  40. Comment passer une entrevue avec une entreprise Internet de première ligne, Android Classic Getting started tutoriel
  41. Comment essayer un développeur Android vraiment niveau, 【 résumé de l'entrevue 】
  42. Wang Ou went back to the hotel with the man at night. It was suspected that his relationship was open. The netizen replied mercilessly: is the man single
  43. 借助HTML ping属性实现数据上报
  44. APNG在线制作、兼容、播放和暂停
  45. Apng production, compatibilité, lecture et pause en ligne
  46. Mise en œuvre de l'escalade des données avec l'attribut de Ping HTML
  47. Comment envoyer 100 000 requêtes http le plus rapidement possible
  48. JQuery Basics
  49. Front and back end data interaction (V) -- what is Axios?
  50. Serverless is a model architecture invented driven by economic benefits- Grady
  51. Les questions d'entrevue pour les ingénieurs Java d'Internet, les intervieweurs rencontrés sont tous de niveau architecte,
  52. Cinq ans d'entrevue d'expérience en développement Java, découvrez les questions que vous devez poser lors de l'entrevue d'embauche du printemps Java de cette année.
  53. La dernière collection de questions d'entrevue Java haute fréquence organisée cette année, 2021 Java Universal Popular Framework
  54. Intel selected Weilai es8 to promote driverless taxis in Europe
  55. JavaScript operator (1), Web Development Engineer
  56. Trier les questions d'entrevue Javascript, trier les points de connaissance des itinéraires d'apprentissage
  57. Song Mengjun's "sleepless night" triggered an upsurge of dance storm after 00
  58. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  59. Encapsulated PHP sends HTTP requests with curl. Get and post are very easy to use
  60. Front and back end data interaction (V) -- what is Axios?