h5API

tech2024-07-27 29

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas</title> <script type="text/javascript"></script> <script> window.onload=function(){ //1.获取画布 var canvas=document.getElementById("canvas"); //2.获取画笔(获取上下文对象) var cx=canvas.getContext("2d"); //3.设置画笔样式 cx.fillStyle='red'; //实心画笔样式 cx.strokeStyle='blue'; //空心画笔样式 //4.绘制图形 // 1.绘制矩形 1-2起始坐标 3-4 宽度，高度 // cx.fillRect(0,0,100,50); //实心矩形红色 // cx.strokeRect(100,100,100,50); //空心矩形蓝色 // 2.绘制圆形1-2圆心坐标 3半径 4-5起始角和结束角 6是否按逆 // cx.beginPath(); // cx.arc(200,200,100,0,Math.PI*2); //圆 // cx.arc(200,200,100,0,Math.PI,true); //半圆 // cx.arc(200,200,100,0,Math.PI/3,false); //弧 // cx.closePath(); //关闭路径，弧线 // cx.fill(); //实心圆红色 // cx.stroke(); //空心圆蓝色 // 3.绘制线段 // cx.lineWidth=5; //线段粗细 // cx.beginPath(); // cx.moveTo(0,0); // cx.lineTo(100,100); // cx.lineTo(200,10); // cx.lineTo(300,100); // cx.closePath(); //路径封闭 // cx.stroke(); // cx.moveTo(0,200); // cx.lineTo(200,200); // cx.stroke(); // 4.绘制渐变图形 // 线性渐变 // var g=cx.createLinearGradient(0,0,200,200); // g.addColorStop(0.2,"red"); // g.addColorStop(0.6,"pink"); // g.addColorStop(1,"blue"); // cx.fillStyle=g; // cx.fillRect(0,0,200,200); // 径向渐变,围绕圆的半径向外渐变？？？？？？？ // var g=cx.createRadialGradient(200,200,50,100,100,200); //起始圆终点圆坐标 // g.addColorStop(0.2,"red"); // g.addColorStop(0.5,"orange"); // g.addColorStop(1,"green"); // cx.fillStyle=g; // // cx.fillRect(0,0,400,400); // cx.beginPath(); // cx.arc(200,200,200,0,Math.PI*2); // cx.closePath(); // cx.fill(); // 5.平移，扩大,变形 // 保存和回滚 // cx.save(); // cx.fillRect(0,0,100,50); // cx.translate(100,100); //把坐标轴移了 // cx.save(); // cx.scale(2,2); //坐标轴放大 // cx.save(); // cx.rotate(Math.PI/3); //坐标轴旋转60度 // cx.save(); // cx.fillRect(0,0,100,50); // cx.restore(); // cx.restore(); // cx.fillRect(120,0,100,50); // 6.图形组合 // cx.fillRect(100,100,100,100); // cx.globalCompositeOperation="destination-over"; // cx.beginPath(); // cx.arc(200,200,50,0,Math.PI*2); // cx.closePath(); // cx.fillStyle="blue"; // cx.fill(); // 7.绘制文本 cx.font="20px blod"; cx.fillText("hello",200,200); //实心红色 cx.strokeText("world",200,100); //空心蓝色 } </script> </head> <body> <canvas width="400px" height="400px" id="canvas" style="background-color:#ccc"></canvas> </body> </html>

最新回复(0)