<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas demo</title>
</head>
<body>
<canvas id="drawing" width="200" height="200">A drawing of something</canvas>
<canvas id="drawing2" width="200" height="200"></canvas>
<canvas id="drawing3" width="200" height="200"></canvas>
<script>
var drawing = document.getElementById('drawing'),
drawing2 = document.getElementById('drawing2'),
drawing3 = document.getElementById('drawing3');
if(drawing3.getContext){
var context3 = drawing3.getContext('2d');
// 绘制文本fillText(),strokeText(),接收4个参数，要绘制的文本字符串，x坐标，y坐标，可选的最大像素宽度
// 这两个方法以下列三个属性为基础：
// 1、font:表示文本样式、大小以及字体，用css中指定字体的格式来指定，例如“10px Arial”。
// 2、textAlign:表示文本对齐方式。可能的值“start”"end""left""right""center"建议使用“start”and"end"
// 3、textBaseLine:表示文本的基线。可能的值"top""hanging""middle""aiphabetic""ideographic""bottom"
// 这几个属性都有默认值，没有必要每次使用它们都重新设置一遍值
// context3.font = 'bold 16px Arial';
// context3.textAlign = "center";
// context3.textBaseline = 'middle';
// context3.fillText('duibu',100,30);
//
// context3.textAlign = "start";
// context3.fillText("duibu",100,50);
//
// context3.textAlign = "end";
// context3.fillText("duibu",100,70);
var fontSize = 100;
context3.font = fontSize + "px Arial";
// 辅助确定文本的方法measureText(),接收一个参数即即将要绘制的文本，返回一个TextMetrics对象，返回对象只有一个width属性
while(context3.measureText("Hello world").width > 100){
fontSize -- ;
context3.font = fontSize + "px Arial";
}
context3.fillText("Hello world!",10,20);
context3.fillText("Font size is" + fontSize + "px",10,50);
}
if(drawing2.getContext){
// 绘制路径，首先调用beginPath(),开始绘制新路径
// arc(x,y,radius,startAngle,endAngle,counterclockwise),以（x,y）为圆心绘制一条弧线，半径为radius,起始角度，结束角度，最后一个值指的是是否按逆时针方向计算
// moveTo(),将绘制游标移动到（x,y）,不画线
// lineTo(),从上一点绘制一条直线，到（x,y）位置
var context2 = drawing2.getContext('2d');
// 开始路径
context2.beginPath();
// 绘制外圆
context2.arc(100,100,99,0,2 * Math.PI,true);
// 绘制内圆
context2.moveTo(194,100);
context2.arc(100,100,94,0,2 * Math.PI,false);
// 绘制分针
context2.moveTo(100,100);
context2.lineTo(100,15);
// 绘制时针
context2.moveTo(100,100);
context2.lineTo(35,100);
// 描边路径
context2.stroke();
context2.clearRect(0,0,200,200);
// rect(x,y,width,height)从（x,y）开始绘制一个矩形，宽度和高度分别由width和height指定
context2.rect(50,50,100,50);
// isPointInPath(),接收x,y坐标作为参数，用于在路径被关闭之前确定画布上的某一点是否位于路径上
if(context2.isPointInPath(50,100)){
context2.stroke();
}
}
// 确定浏览器支持<canvas>元素
if(drawing.getContext){
var context = drawing.getContext('2d');
// 取得图像的数据URI
// var imgURI = drawing.toDataURL("image/png");
// 显示图像
// var image = document.createElement("img");
// image.src = imgURI;
// document.body.appendChild("image");
// 2D上下文基本操作填充和描边，两个属性（fillStyle，strokeStyle）
// 与矩形有关的三个方法fillRect(),strokeRect(),clearRect(),这三个方法接收四个参数：矩形的x,y坐标，矩形的宽度和高度
// 绘制红色矩形
context.fillStyle = 'red';
context.fillRect(10,10,50,50);
// 绘制蓝色半透明矩形
context.fillStyle = "rgba(0,0,255,.5)";
context.fillRect(30,30,50,50);
context.strokeStyle = '#333';
context.strokeRect(10,10,50,50);
// 清除画布的某一块局部区域
context.clearRect(40,40,10,10);
}
</script>
</body>
</html>
浙公网安备 33010602011771号