1：绘制画布 和在画布上绘制矩形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="canvas.js"></script>
</head>
<body onload="draw(‘canvas‘)">
<canvas id="canvas" width="500" height="350"></canvas>
</body>
</html>
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext(‘2d‘);/*取得上下文*/
context.fillStyle = "green"; /*绘制填充的颜色*/
context.strokeStyle = "#f60";/* 设置边框颜色*/
context.lineWidth = 5; /*设置画笔宽度*/
context.fillRect(0,0,400,300);
context.strokeRect(50,50,180,120);
context.strokeRect(100,100,180,120);
}
2：绘制圆形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas绘制圆形</title>
<script type="text/javascript" src="canvas.js"></script>
</head>
<body onload="draw(‘canvas‘)">
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
/**
* Created by Administrator on 2015/3/29.
*/
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext(‘2d‘);
context.fillStyle = "#f1f2f3";
context.fillRect(0,0,400,400);
/* context.beginPath();
context.arc(10,10,10,0,Math.PI*2,true);*//*代表从10 10 坐标绘制 从0度开始到360度*//* *//*true 代表顺时针*//*
context.closePath(); *//*关闭上下文对象*//*
context.fillStyle= "rgba(255,0,0,0,0.25)";
context.fill();*/
for(var i=0 ;i<10;i++)
{
context.beginPath();
context.arc(10+i*25,10+i*25,10+i*10,10,0,Math.PI*2,true);/*代表从10 10 坐标绘制 从0度开始到360度 *true 代表顺时针*/
context.closePath(); /*关闭上下文对象*/
context.fillStyle= "rgba(255,0,0,0.25)";
context.fill();
}
}
3：绘制文字
/**
* Created by Administrator on 2015/3/29.
*/
function draw(id)
{
var canvas = document.getElementById(id);
var context = canvas.getContext(‘2d‘);
context.fillStyle =‘green‘;
context.fillRect(0,0,800,300);
context.fillStyle=‘#fff‘;
context.strokeStyle =‘#fff‘;
context.font = "bold 100px ‘微软雅黑‘,‘宋体‘";
context.fillText(‘God is a girl！‘,50,150);
context.strokeText(‘God is a girl！‘,61,160);
window.location = canvas.toDataURL(‘image/png‘);
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="canvas.js"></script>
</head>
<body onload="draw(‘canvas‘)">
<canvas id="canvas" width="800" height="300"></canvas>
</body>
</html>
4：绘制动画
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="canves.js"></script>
</head>
<body onload="draw(‘canves‘)">
<canvas id="canves" width="400" height="400"> </canvas>
</body>
</html>
/**
* Created by Administrator on 2015/3/29.
*/
var i;
function draw(id){
var canves = document.getElementById(id);
context = canves.getContext(‘2d‘);
setInterval(painting,100);
i=0;
}
function painting(){
/* context.fillStyle= ‘green‘;
context.fillRect(i,0,10,10);
i=i+20;*/
context.fillStyle ="green";
context.fillRect(0,0,400,400);
context.fillStyle="red";
context.clearRect(i,0,10,10);
i=i+10;
}
时间： 2024-08-05 16:24:12