碰壁反弹
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>反弹</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#cvs{
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="cvs" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var csv = document.getElementById("cvs");
ctx = cvs.getContext("2d");
//获取随机位置
var x = Math.floor(Math.random()*500);
var y = Math.floor(Math.random()*500);
//判断是在左边还是右边
var l=true;
t=true;
//如果在左边就加,向右运动;在右边就减,向左运动
function hua(){
if(l){
x++;
if(x>=csv.width-80){
l = false;
}
}else{
x--;
if(x<=0){
l = true;
}
}
if(t){
y++;
if(y>=csv.height-80){
t = false;
}
}else{
y--;
if(y<=0){
t = true;
}
}
//根据随机位置画图
ctx.beginPath();
ctx.rect(x,y,80,80);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
}
setInterval(function(){
//在绘画小方块之前要清一下屏,否则会不断重画
ctx.clearRect(0,0,csv.width,csv.height)
hua();
},1)
</script>
</html>
画布
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画布</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#csv{
border: 1px solid #000;
margin: 10px 0 0 50px;
}
</style>
</head>
<body>
<canvas id="csv" width="600" height="500"></canvas>
<button id="btn1">画画</button>
<button id="btn2">擦除</button>
<button id="btn3">重画</button>
</body>
<script type="text/javascript">
var csv = document.getElementById("csv");
ctx = csv.getContext("2d");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
//画画
btn1.onclick=function(){
csv.onmousedown=function(e){
ctx.beginPath();
ctx.moveTo(e.clientX-csv.offsetLeft,e.clientY-csv.offsetTop);
document.onmousemove=function(e){
ctx.lineTo(e.clientX-csv.offsetLeft,e.clientY-csv.offsetTop);
ctx.strokeStyle = "red";
ctx.lineWidth=5;
ctx.stroke();
}
document.onmouseup=function(){
document.onmousedown=null;
document.onmousemove=null
}
}
}
//擦除
btn2.onclick=function(){
csv.onmousedown=function(e){
document.onmousemove=function(e){
ctx.clearRect(e.clientX-csv.offsetLeft,e.clientY-csv.offsetTop,10,10);
}
document.onmouseup=function(){
document.onmousedown=null;
document.onmousemove=null
}
}
}
//清屏
btn3.onclick = function(){
ctx.clearRect(0,0,csv.width,csv.height);
}
</script>
</html>
贝壳
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#cvs{
/*border: 1px solid #000;*/
}
</style>
</head>
<body>
<canvas id="cvs" width="500" height="400"></canvas>
</body>
<script type="text/javascript">
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext("2d");
ctx.beginPath();
ctx.arc(100,200,100,0,2*Math.PI,true);
ctx.closePath();
ctx.strokeStyle="blue";
ctx.stroke();
ctx.beginPath();
ctx.arc(50,200,50,0,2*Math.PI,true);
ctx.closePath();
ctx.strokeStyle="pink";
ctx.stroke();
ctx.beginPath();
ctx.arc(60,200,60,0,2*Math.PI,true);
ctx.closePath();
ctx.strokeStyle="yellow";
ctx.stroke();
ctx.beginPath();
ctx.arc(80,200,80,0,2*Math.PI,true);
ctx.closePath();
ctx.strokeStyle="red";
ctx.stroke();
</script>
</html>
刮刮乐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>刮刮乐</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#guaguajiang{
width: 300px;
height: 150px;
text-align: center;
line-height: 150px;
font-size: 30px;
margin-left: 100px;
position: absolute;
}
#csv{
margin-left: 99px;
border: 1px solid red;
position: absolute;
z-index: 9999;
}
</style>
</head>
<body>
<canvas id="csv" width="300" height="150"></canvas>
<div id="guaguajiang">一等奖</div>
</body>
<script type="text/javascript">
var csv = document.getElementById("csv");
ctx = csv.getContext("2d");
var ggj = document.getElementById("guaguajiang");
var arr=["一等奖","二等奖","海景别墅","一个亿","来克莱斯幻影","谢谢惠顾"];
var i = Math.floor(Math.random()*arr.length);
arr[i];
ggj.innerHTML = arr[i];
ctx.beginPath();
ctx.rect(0,0,300,150);
ctx.fillStyle = "#C0C0C0";
ctx.fill();
ctx.closePath();
//刮奖
csv.onmousedown=function(e){
document.onmousemove=function(e){
ctx.clearRect(e.clientX-csv.offsetLeft,e.clientY-csv.offsetTop,10,10);
}
document.onmouseup=function(){
document.mousemove=null;
document.mousedown=null;
}
}
</script>
</html>
时钟
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas时钟</title>
</head>
<body>
<canvas width="500" height="500" style="background:pink; margin:50px auto; display:block; " id="clock">
您的浏览器当前版本不支持canvas表签
</canvas>
<script>
var clock = document.getElementById("clock");
var cxt = clock.getContext('2d');
function drawClock(){
cxt.clearRect(0,0,500,500); //清除画布
//获取时间
var now = new Date(); //定义时间
var sec = now.getSeconds(); //获取秒
var minute = now.getMinutes(); //获取分钟
var hour = now.getHours(); //获取小时
//小时必须获取浮点类型,产生偏移(小时+分钟比)
hour = hour + minute/60;
//将24小时转换为12小时
hour=hour>12?hour-12:hour;
//表盘(蓝色)
cxt.beginPath(); //画笔开始
cxt.lineWidth = 5; //设置画笔的线宽
cxt.strokeStyle="blue"; //设置画笔的颜色
cxt.arc(250,250,200,0,360,false); //绘制圆形,坐标250,250 半径200,整圆(0-360度),false表示顺时针
cxt.stroke(); //绘图
cxt.closePath(); //结束画布
//刻度
//时针刻度
for(var i=0; i<12; i++){
cxt.save();
//设置时针的样式
cxt.lineWidth=7;
cxt.strokeStyle="#000";
//设置异次元空间原点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(i*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170); //画线, 从坐标0,-170开始
cxt.lineTo(0,-190); //到坐标0,-190结束
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//分针刻度
for(var i=0; i<60;i++){
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="#000";
cxt.translate(250,250);
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//时针
cxt.save();
//时针样式
cxt.lineWidth = 7;
cxt.strokeStyle="#000";
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.stroke();
cxt.closePath();
cxt.restore();
//分针
cxt.save();
//分针样式
cxt.lineWidth = 5;
cxt.strokeStyle="#000";
cxt.translate(250,250);
cxt.rotate(minute*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.stroke();
cxt.closePath();
cxt.restore();
//秒针
cxt.save();
cxt.lineWidth = 3;
cxt.strokeStyle="#f00";
cxt.translate(250,250);
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-185);
cxt.lineTo(0,20);
cxt.stroke();
cxt.closePath();
//画出时针,分针,秒针交叉点
cxt.beginPath();
cxt.strokeStyle="#f00";
cxt.arc(0,0,5,0,360,false);
cxt.fillStyle="#fff"; //填充颜色
cxt.fill(); //填充
cxt.stroke();
cxt.closePath();
//秒针装饰
cxt.beginPath();
cxt.strokeStyle="#f00";
cxt.arc(0,-160,5,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//使用setinterval();让时钟动起来
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#csv{
background: papayawhip;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin:auto;
}
</style>
</head>
<body>
<canvas id="csv" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var csv = document.getElementById("csv");
ctx = csv.getContext("2d");
function clock(){
ctx.clearRect(0,0,csv.width,csv.height);
//获取时间
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
hour = hour+minute/60;
hour=hour>12?hour-12:hour;
//时钟外框
ctx.beginPath();
ctx.lineWidth = 5;
ctx.arc(250,250,200,0,2*Math.PI,true);
ctx.strokeStyle = "orangered";
ctx.stroke();
ctx.closePath();
//标注小时时间
ctx.font = "bold 30px 幼圆";
ctx.fillStyle = "#000";
ctx.fillText("12",240,105)
ctx.fillText("11",160,130)
ctx.fillText("1",320,130)
ctx.fillText("10",100,180)
ctx.fillText("2",380,180)
ctx.fillText("9",80,260)
ctx.fillText("3",400,260)
ctx.fillText("8",105,340)
ctx.fillText("4",375,340)
ctx.fillText("7",170,400)
ctx.fillText("6",240,420)
ctx.fillText("5",320,400)
//小时刻度
for(var i=0; i<12;i++){
ctx.save();
ctx.lineWidth=6;
ctx.strokeStyle = "coral";
ctx.translate(250,250);
ctx.rotate(i*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-200);
ctx.lineTo(0,-180);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
//分钟刻度
for(var i=0;i<60;i++){
if(i%5!=0){
ctx.save();
ctx.lineWidth = 5;
ctx.strokeStyle = "crimson";
ctx.translate(250,250);
ctx.rotate(i*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-200);
ctx.lineTo(0,-190);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
}
//时针
ctx.save();
ctx.lineWidth=7;
ctx.strokeStyle = "#3C3C3C";
ctx.translate(250,250);
ctx.rotate(hour*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-130);
ctx.lineTo(0,10);
ctx.stroke();
ctx.closePath();
ctx.restore();
//分针
ctx.save();
ctx.lineWidth=5;
ctx.strokeStyle = "#66512C";
ctx.translate(250,250);
ctx.rotate(minute*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-140);
ctx.lineTo(0,10);
ctx.stroke();
ctx.closePath();
ctx.restore();
//秒针
ctx.save();
ctx.lineWidth=3;
ctx.strokeStyle = "orangered";
ctx.translate(250,250);
ctx.rotate(second*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-170);
ctx.lineTo(0,20);
ctx.stroke();
ctx.closePath();
ctx.restore();
//时钟中心
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeStyle="orangered";
ctx.arc(250,250,5,0,2*Math.PI,false);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.stroke();
ctx.closePath();
}
setInterval(function(){
clock();
},1000)
</script>
</html>
画心
<!DOCTYPE html>
<html>
<head>
<title>Draw Heart</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html {
height: 100%;
margin: 0;
}
body {
height: 100%;
background-color: white;
}
#canvasZone {
width: 100%;
height: 100%;
text-align: center;
}
#myCanvas {
height: 100%;
display: block;
/*background-color:aqua;*/
}
</style>
<script type="text/javascript">
var arr = [];//保存所有的XY坐标,只为验证。实际程序中可删除。
var r = 4;
var radian;//弧度
var i;
var radianDecrement;//弧度增量
var time = 10;//每个点之间的时间间隔
var intervalId;
var num = 360;//分割为 360 个点
var startRadian = Math.PI;
var ctx;
window.onload = function () {
startAnimation();
}
function startAnimation() {
ctx = document.getElementById("myCanvas").getContext("2d");
//让画布撑满整个屏幕,-20是滚动条的位置,需留出。如滚动条出现则会挤压画布。
WINDOW_HEIGHT = document.documentElement.clientHeight - 20;
WINDOW_WIDTH = document.documentElement.clientWidth - 20;
ctx.width = WINDOW_WIDTH;
ctx.heigh = WINDOW_HEIGHT;
drawHeart();
}
function drawHeart() {
ctx.strokeStyle = "red";
ctx.lineWidth = 1;//设置线的宽度
radian = startRadian;//弧度设为初始弧度
radianDecrement = Math.PI / num * 2;
ctx.moveTo(getX(radian), getY(radian));//移动到初始点
i = 0;
intervalId = setInterval("printHeart()", time);
}
//x = 16 sin^3 t, y = (13 cos t - 5 cos 2t - 2 cos 3t - cos 4t)
function printHeart() {
radian += radianDecrement;
ctx.lineTo(getX(radian), getY(radian));//在旧点和新点之间连线
//arr.push("X:" + getX(radian) + "<br/>Y:" + getY(radian) + "<br/>");
i++;
ctx.stroke();//画线
if (i >= num) {
clearInterval(intervalId);
//document.getElementById("bs").innerHTML = arr.join("");//打印所有的XY坐标点。
}
}
function getX(t) {//由弧度得到 X 坐标
return 100 + r * (16 * Math.pow(Math.sin(t), 3));
}
function getY(t) {//由弧度得到 Y 坐标
return 50 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
}
</script>
</head>
<body>
<div id="canvasZone">
<canvas id="myCanvas"></canvas>
</div>
<div id="bs">
</div>
</body>
</html>