HTML5 dessinant une image d'arrière-plan dégradé et téléchargeant automatiquement les étapes de mise en œuvre_html5 compétences du didacticiel

drawBgLine.html

Copier le code

Le code est le suivant :

;/ tête>


< ;/ center>
<script> <br> //Étape 1 : Obtenir l'objet canevas <br> var c = document.getElementById("c"); l'objet canevas Object <br> var context = c.getContext("2d"); <br> /* <br> * Ce sont des codes pour dessiner d'autres graphiques <br> context.beginPath(); =10; <br> context.StrokeStyle="red"; <br> context.moveTo(50,50); <br> context.lineTo(150,50); context.closePath( ); <br> //context.strokeRect(220,50,50,50); <br> context.fillStyle="bleu" <br> context.fillRect(220,50,50,50) ; <br> context.beginPath(); <br> context.arc(150,150,50,0*Math.PI/180,-180*Math.PI/180,false); ; <br> context.closePath(); <br> context.stroke(); <br> context.lineWidth=1; <br> context.font="50px 宋体"; <br> context.fillText("briup" ,0,220); <br> contexte.save(); <br> contexte.translate(50,50); <br> contexte.rotate(90*Math.PI/180); <br> context .lineWidth=10; <br> context.strokeStyle="red"; <br> context.moveTo(0,0); <br> context.lineTo(100,0); (); <br> context.closePath(); <br> context.restore(); <br> */ <br> var g = context.createLinearGradient(0,0,0,200); 0,"90BFFF "); <br> g.addColorStop(1,"white"); <br> context.fillStyle = g <br> context.fillRect(0,0,1,200); = c.toDataURL ("image/jpeg").replace("image/jpeg","image/octet-stream" ​​​​<br> </script>