Canvas Examples
一个canvas是在html页面上规则的区域。
默认的，一个canvas没有边框和内容
<canvas id="myCanvas" width="200" height="100"></canvas>
基本步骤
<script>
var canvas = document.getElementById("myCanvas");//发现canvas元素
var ctx = canvas.getContext("2d");//创建一个drawing对象
//在画布上画画
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
HTML Canvas Coordinates
Canvas Coordinates
The HTML canvas 是一个二维空间的栅格
左上角的坐标是0,0
fillRect(0,0,150,75)：从（0,0）开始画一个150x75 pixels 的矩形
Draw a Line
- moveTo(x,y) - defines the starting point of the line
- lineTo(x,y) - defines the ending point of the line
To actually draw the line, you must use one of the "ink" methods, like stroke().
Draw a Circle
- beginPath() - begins a path
- arc(x,y,r,startangle,endangle) - 创建一个圆弧/圆圈。起始角度0到 2*Math.PI。圆心(x,y)。半径：r。
Canvas - Gradients
j渐变可以用于填充形状线条等。
- createLinearGradient(x,y,x1,y1) - 线型渐变
- createRadialGradient(x,y,r,x1,y1,r1) - 放射状/圆形渐变
渐变对象需要设置两个亦或以上的颜色。使用addColorStop() 确定颜色的位置（0-1）和颜色。
将渐变赋值给属性fillstyle亦或strokeStyle，然后画出形状（规则几何，文本或线条）
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Drawing Text on the Canvas
- font - 字体
- fillText(text,x,y) - 实心字,从距离画布左边x和距离画布上面y距离处开始写字
- strokeText(text,x,y) - 空心字
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);
Canvas - Images
- drawImage(image,x,y)——不能再图片加载之前调用此方法
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" width="220" height="277"
src="pic_the_scream.jpg" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
</body>
</html>
画一个动态时钟
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400"
style="background-color:#333">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;//设置半径为画布高度一半
ctx.translate(radius, radius); //将画布起点从左上角设置到画布中心，因为设置的画布宽度和高度一样，所以(radius,radius)等于(200,200)
radius = radius * 0.90 //时钟最外面的圆的半径
setInterval(drawClock, 1000); //每隔一秒调用下面的函数
function drawClock() {
drawFace(ctx, radius); //绘制表面
drawNumbers(ctx, radius); //绘制数字
drawTime(ctx, radius); //绘制指针
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath(); //开始画线条
ctx.arc(0, 0, radius, 0, 2*Math.PI); //原型(0,0),半径radius，从0度到360度画一个圆圈
ctx.fillStyle = ‘white‘; //背景颜色白色
ctx.fill(); //填充
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); //放射型渐变
grad.addColorStop(0, ‘#333‘);
grad.addColorStop(0.5, ‘white‘);
grad.addColorStop(1, ‘#333‘);
ctx.strokeStyle = grad;//线条样式
ctx.lineWidth = radius*0.1;//线条宽度
ctx.stroke();//填充线条
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);//画表盘中间的圆点
ctx.fillStyle = ‘#333‘;
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){ //1-12
ang = num * Math.PI / 6; //以30度为一个划分
ctx.rotate(ang);//顺时针旋转画布度
ctx.translate(0, -radius*0.85);//在已经旋转的画布上设置中心为当前中心的垂直正上方
ctx.rotate(-ang);//逆时针旋转画布，以上三步目的是设置文字书写的中心点
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>
</body>
</html>
时间： 2024-10-20 23:31:55