<!DOCTYPE html> <!-- saved from url=(0037)https://qd.andiff.net/guaguale/c.html --> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script> window.onload = function(){ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.translate(100,100);//设置画布中心，旋转时是按中心点为基础来旋转的，默认(0,0) // ctx.rotate(5*Math.PI/180);//旋转角度 ctx.fillStyle="#FF0000"; ctx.fillRect(-75,-75,150,100); var ctx = c.getContext("2d"); //画一条线 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(250,0);//定义线条开始坐标 ctx.lineTo(300,150);//定义线条结束坐标 ctx.stroke(); //画圆 ctx.beginPath(); ctx.arc(400,100,50,0,2*Math.PI);//x,y,r,begin.end ctx.stroke(); //画字 ctx.font="20px Arial"; ctx.fillText("这里",380,100); ctx.strokeText("Hello World",380,120); //载图 var img= document.getElementById("img"); ctx.drawImage(img,0,250,200,100); } </script> </head> <body style=""> <canvas id="myCanvas" width="1000" height="500" style="border:1px solid #cd3;"></canvas> <img id="img" src="https://www.baidu.com/img/PCpad_012830ebaa7e4379ce9a9ed1b71f7507.png" style="display:none"/> </body> </html>