<!DOCTYPE html><!--告诉浏览器这是html5页面,注意要用支持html5的浏览器啊-->
<html>
<head><meta charset="utf-8"/></head>
<body>
<!--定义加载视频,-->
<div>这是我视频播放器
<video src="黑马程序员_毕向东_Java基础视频教程第15天-11-集合框架(泛型接口).avi" controls="controls" width="400px" height="300px"></video>
</div>
<div>这是我的音乐播放器,其实是一样的
<video src="bgsound .mp3" controls="controls"></video>
</div>
<canvas id="can" width="300px" height="300px" style="border:2px solid red"></canvas>
</body>
<script type="text/javascript">
var canvas=document.getElementById("can");//拿到画布
var cxt=canvas.getContext("2d");//可以理解为拿到画笔
//此圆形是红心实心,黑色边框的圆
cxt.beginPath();
cxt.arc(80,250,20,0,360,true);
cxt.stroke();//根据规则划线,实现空心圆
//下面的两句是实心圆,并可设置颜色
cxt.fillStyle="red";//设置颜色 ,注意顺序是先设置颜色,再填充啊,不设置的话,默认是黑色
cxt.fill();//填充
cxt.closePath();
//画直线
cxt.beginPath();
cxt.strokeStyle="green";//设置直线颜色
cxt.lineWidth="6";//设置直线宽度
cxt.moveTo(10,10);//设置起始点
cxt.lineTo(10,150);//设置移动点到
cxt.stroke();//根据规则划线,实现直线
cxt.closePath();
//画直线
cxt.beginPath();
cxt.moveTo(10,10);//设置起始点
cxt.lineTo(20,150);//设置移动点到
cxt.stroke();//根据规则划线,实现直线
cxt.closePath();
//同理可画出任意图形...等等任意不会则图形
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,100);
cxt.lineTo(50,100);
cxt.lineTo(100,50);
cxt.lineTo(50,50);//注意这里要回到原点啊,不然不封口的
cxt.stroke();
cxt.closePath();
//同理可画出正方形填充颜色...等等任意不会则图形
cxt.beginPath();
cxt.moveTo(200,50);
cxt.lineTo(200,100);
cxt.lineTo(250,100);
cxt.lineTo(250,50);
cxt.lineTo(200,50);//注意这里要回到原点啊,不然不封口的
cxt.fillStyle="blue";//可以填充颜色,不设置的话,默认是黑色
cxt.fill();//填充
cxt.closePath();
//同理可画出三角形...等等任意不会则图形
cxt.beginPath();
cxt.moveTo(50,120);
cxt.lineTo(50,200);
cxt.lineTo(100,200);
//cxt.lineTo(50,120);//注意这里要回到原点啊,不然不封口的
//cxt.stroke();//这里串点的话,要给出原点啊
cxt.fill();//会继承之前设置过的颜色,填充的话,直接给三个点就可以了
cxt.closePath();
//画矩形函数
cxt.beginPath();
// x轴,y轴 长 宽
cxt.strokeRect(130,120,50,50);//直接画矩形函数
cxt.closePath();
//画填充矩形,注意这里有直接封装好的函数调用即可
cxt.beginPath();
cxt.fillStyle="green";//,注意这里颜色也继承啦啊,当然可以自己设定颜色
cxt.fillRect(200,120,40,40);//直接调用封装好的函数即可
cxt.closePath();
</script>
</html>
HTML5基本用法1
最新推荐文章于 2024-09-11 10:10:41 发布