html5学习之路-----3

最新推荐文章于 2023-03-03 19:57:03 发布

飞鸟zjs

最新推荐文章于 2023-03-03 19:57:03 发布

阅读量495

点赞数

分类专栏： html5+css3

本文链接：https://blog.csdn.net/asdfzjs/article/details/38842501

版权

html5+css3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

canvas

<!doctype html>
<html>
	<head></head>
	<body>
		<canvas width="500" height="800" style="background:yellow"  id="canvas">
			您的浏览器当前版本不支持canvas标签
		</canvas>
		<script>
			//获取画布DOM  还不可以操作
			var canvas=document.getElementById('canvas');
			//alert(canvas);
			//设置绘图环境
			var cxt=canvas.getContext('2d');
			//alert(cxt);
			
			//画一条线段。
				//开启新路径
				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(200,200,50,0,360,false);
				cxt.stroke();
				//封闭新路径
				cxt.closePath();
			//画一个实心圆形
				cxt.beginPath();
				//设置填充的颜色
				cxt.fillStyle="rgb(255,0,0)";
				cxt.arc(200,100,50,0,360,false);
				cxt.fill();
				cxt.stroke();
				cxt.closePath();
			//画一个矩形
				cxt.beginPath();
				cxt.rect(300,20,100,100);
				cxt.stroke();
				cxt.closePath();
				//其他方法 建议使用此方式
				cxt.strokeRect(300,150,100,100)
				//实心矩形
				cxt.beginPath();
				cxt.rect(300,270,100,100);
				cxt.fill();
				cxt.closePath();
				//其他方法 建议使用此方式
				cxt.fillRect(300,390,100,100);
			//设置文字
				cxt.font="40px 宋体";//css font属性
				cxt.fillText("无兄弟，不编程",20,300);
				//将笔触设置为1像素
				cxt.lineWidth=1;
				cxt.strokeText("无兄弟，不编程",20,350);
			//画图 把一幅图片画到画布中  注意webkit内核的浏览器 chrome和猎豹不支持
				var img =new Image();
				img.src="xiaomm.jpg";
				cxt.drawImage(img,20,370,230,306);
			//画一个三角形
				cxt.beginPath();
				//移动至开始点
				cxt.moveTo(300,500);
				cxt.lineTo(300,600);
				cxt.lineTo(400,550);
				cxt.closePath();//填充或者画路径需要先闭合路径再画
				cxt.stroke();
				//实心三角形
				cxt.beginPath();
				//移动至开始点
				cxt.moveTo(300,600);
				cxt.lineTo(300,700);
				cxt.lineTo(400,650);
				cxt.closePath();
				cxt.fill();
			//旋转图片 图片
				//设置旋转环境
				cxt.save();
					//在异次元空间重置0,0点的位置
					cxt.translate(20,20);
				//图片/形状旋转
					//设置旋转角度  参数是弧度  角度 0-360 弧度=角度*Math.PI/180
					cxt.rotate(-30*Math.PI/180);
					//旋转一个线段
					cxt.lineWidth=10;
					cxt.beginPath();
					cxt.moveTo(0,0);
					cxt.lineTo(20,100);
					cxt.stroke();
					cxt.closePath();
				//将旋转之后的元素放回原画布
				cxt.restore();
				//过程不可颠倒 先设置00点在旋转角度，然后画图
				
			//旋转小萌萌
				cxt.save();
				cxt.translate(20,370);
				cxt.rotate(-10*Math.PI/180);
				var img =new Image();
				img.src="xiaomm.jpg";
				cxt.drawImage(img,0,0,230,306);
				cxt.restore();
				
				
				
				
		</script>
		
	</body>
</html>

飞鸟zjs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5学习之路-----3

canvas 您的浏览器当前版本不支持canvas标签 //获取画布DOM 还不可以操作 var canvas=document.getElementById('canvas'); //alert(canvas); //设置绘图环境 var cxt=canvas.getContext('2d'); //alert(cxt)
复制链接

扫一扫