<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CANVAS</title>
</head>
<body>
<canvas height="800" width="800" style="background: pink" id="canvas1">
您的当前浏览器版本不支持canvas标签
</canvas>
<script type="text/javascript">
//获取标签元素
var ext = document.getElementById("canvas1");
// alert(ext)
//创建环境
var cxt=ext.getContext("2d");
//画直线
cxt.beginPath();
cxt.lineWidth=10;
cxt.strokeStyle="#ff9900";
cxt.moveTo(20,20);
cxt.lineTo(100,20);
cxt.stroke();
cxt.closePath();
//画圆 空心
cxt.beginPath();
cxt.lineWidth=3;
cxt.strokeStyle="green";
cxt.arc(70,100,50,0,360,false);
cxt.stroke();
cxt.closePath();
//画圆 实心
cxt.beginPath();
cxt.lineWidth=3;
cxt.fillStyle="yellow";
cxt.arc(200,100,50,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
//画矩形 空心
cxt.beginPath();
// cxt.rect(10,200,60,60);
// cxt.stroke();下面一句代码就是简写，推荐用下面的写法
cxt.strokeRect(10,200,60,60);
cxt.closePath();
//画矩形 实心
cxt.beginPath();
// cxt.rect(80,200,60,60);
// cxt.fill();下面一句代码就是简写，推荐用下面的写法
cxt.fillRect(80,200,60,60);
cxt.closePath();
//添加文本
cxt.beginPath();
cxt.font="40px 宋体";
cxt.fillText("无兄弟",20,300);
cxt.lineWidth=1;
cxt.strokeText("无兄弟",20,350);
cxt.closePath();
//将图片画到画布上面去 谷歌不支持
var img=new Image();
img.src="0.jpg";
cxt.drawImage(img,20,400,400,300);
//画三角形
cxt.beginPath();
cxt.moveTo(200,20);
cxt.lineTo(300,20);
cxt.lineTo(350,50);
cxt.lineTo(200,20);
cxt.closePath();
cxt.fill();
cxt.stroke();
//旋转一个字段
cxt.save();
cxt.translate(20,20);
cxt.rotate(-60*Math.PI/180);
cxt.beginPath();
cxt.lineWidth=10;
cxt.moveTo(0,0);
cxt.lineTo(20,100);
cxt.stroke();
cxt.closePath();
cxt.restore();
//旋转图片
cxt.save();
cxt.translate(20,400);
cxt.rotate(-10*Math.PI/180);
var img =new Image();
img.src="0.jpg";
cxt.drawImage(img,0,0,400,300);
cxt.restore();
</script>
</body>
</html>
时间： 2024-08-06 20:36:57