html5 之canvas标签

最新推荐文章于 2024-04-14 19:33:13 发布

毛太

最新推荐文章于 2024-04-14 19:33:13 发布

阅读量932

点赞数

分类专栏： html5

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一句话：各种api各种调用！！

<canvas id="can" width="500" height="500" style="background:orange;">不支持！</canvas>
<script> 
// 获取画布，还不可以操作
var can = document.getElementById('can');  // alert -->Element
// console.log(can);
// 设置绘图环境
var cxt = can.getContext('2d');  // alert -->Context2D 
// console.log(ext);

// 画一条线段。
cxt.lineWidth = 10; // 可以设定画笔宽度
cxt.strokeStyle="gray";


cxt.moveTo(20,20);  // 从哪开始  从哪开始画？
cxt.lineTo(20,290);  // 画到哪？ 设置移动的方式
cxt.stroke();  // 开始画
// 封闭路径
cxt.closePath();
// 重新打开
cxt.beginPath();
// 画圆

cxt.strokeStyle ="green";
cxt.arc(200,200,50,0,360,false);
cxt.stroke();
cxt.closePath();

cxt.fillStyle = "red";
cxt.beginPath();
cxt.arc(200,50,30,0,360,false);
cxt.stroke();
cxt.fill();
cxt.closePath;

// 画一个矩形
cxt.rect(300,20,100,100);
cxt.stroke();

cxt.beginPath();
cxt.rect(100,20,100,30);
cxt.stroke();
cxt.fill();

cxt.fillRect(300,50,20,20);
cxt.fill();

// 看api调用接口即可
cxt.font="40px 黑体";
cxt.fillText("以为",30,300);   // 写字
cxt.lineWidth="1";
cxt.font="80px 黑体";
cxt.strokeText("以为",60,300);

// 图片
var img = new Image();
img.src="zxxuey1.jpg";
cxt.drawImage(img,20,370,30,200);  // 浏览器有几个不支持

// 三角
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(30,50);
cxt.lineTo(50,30);
cxt.lineTo(50,50);
cxt.stroke();
cxt.closePath();

// 旋转
cxt.save();
// 图片/形状旋转

	// 设置旋转角度rotate  参数是弧度   弧度=角度*Math.PI / 180
	
	cxt.rotate(-30*Math.PI/180); 
		// 在这个空间重置 0 0 位置
		cxt.translate(20,20);
	// 旋转一个线段
	cxt.beginPath();
	cxt.moveTo(0,0); // 按照他旋转
	cxt.lineTo(20,270);
	cxt.stroke();
	cxt.closePath();
// 将旋转之后的元素放回原画布
cxt.restore();


</script>

囧，还是一句话，各种api满天飞