【JavaScript高级程序设计】22、使用canvas绘图(1)
1、绘制图形
调用canvas的2d上下文进行绘画
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>我的第一个canvas界面</title>
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
var drawing = document.getElementById("myCanvas");
if(drawing.getContext)
{
//判断浏览器是否支持canvas，如果支持
//绘制一个红色矩形
var context = drawing.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 300, 300); //前两个是x,y坐标，后面是长与宽
//绘制蓝色
context.fillStyle = "rgba(0, 0, 255, 0.5)";
context.fillRect(160, 160, 300, 300);
}
//myCanvas2
var drawing2 = document.getElementById("myCanvas2");
if(drawing2.getContext)
{
//判断浏览器是否支持canvas，如果支持
//绘制一个红色矩形
var context = drawing2.getContext("2d");
context.strokeStyle = "#ff0000";
context.strokeRect(10, 10, 300, 300); //前两个是x,y坐标，后面是长与宽
//绘制蓝色
context.strokeStyle = "rgba(0, 0, 255, 0.5)";
context.strokeRect(160, 160, 300, 300);
}
myCanvas3();
}
function myCanvas3()
{
//myCanvas2
var drawing = document.getElementById("myCanvas3");
if(drawing.getContext)
{
//判断浏览器是否支持canvas，如果支持
//绘制一个红色矩形
var context = drawing.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 300, 300); //前两个是x,y坐标，后面是长与宽
//绘制蓝色
context.fillStyle = "rgba(0, 0, 255, 0.5)";
context.fillRect(160, 160, 300, 300);
//吧中间一部分空余出来
context.clearRect(185, 185, 100, 100);
}
}
</script>
<!-- 设定画布的大小 -->
<br/>
<canvas id = "myCanvas" width="500" height="500">使用canvas</canvas>
<canvas id = "myCanvas2" width="500" height="500">使用canvas</canvas>
<canvas id = "myCanvas3" width="500" height="500">使用canvas</canvas>
<br/>
</body>
</html>
显示：
2、绘制路径
这里使用canvas的功能绘画一个钟表
<!DocType html>
<html>
<head>
<meta charset="utf-8" />
<title> 绘制路径 </title>
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
canvas1();
canvasNum();
}
function canvas1()
{
var drawing = document.getElementById("myCanvas1");
//判断浏览器时候支持canvas
if(drawing.getContext)
{
var context = drawing.getContext("2d");
//开始绘制路径
context.beginPath();
//画外圈园
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
//内圈圆.这是吧坐标移动道内圈圆的一个位置上
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
//绘制时针分针
context.moveTo(100, 100);
context.lineTo(35, 100);
context.moveTo(100, 100);
context.lineTo(100, 15);
context.stroke();
}
}
//绘制时针的数字
function canvasNum()
{
var drawing = document.getElementById("myCanvas1");
//判断浏览器时候支持canvas
if(drawing.getContext)
{
var context = drawing.getContext("2d");
//绘制四个方向上的数据
context.font = "bold 14px Arial"; //字体，css
context.textAlign = "center"; //居中
context.textBaseline = "middle"; //垂直对齐方式
context.fillText("12", 100, 20);
context.fillText("3", 180, 100);
context.fillText("6", 100, 180);
context.fillText("9", 20, 100);
}
}
</script>
<canvas id = "myCanvas1" width = "500" height = "500"></canvas>
</body>
</html>
显示：
3、使用canvas调用图像数据
这里把图案变成灰色，并在新的位置绘画出来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片数据转化</title>
</head>
<body>
<img id="smiley" src="eg_smile.gif" border="1" title="Image tag" />
<br/>
<canvas id="drawing" width="500" height="500">Your browser doesn't support the canvas tag.</canvas>
<script type="text/javascript">
window.onload = function()
{
imageData();
}
function imageData()
{
var drawing = document.getElementById("drawing");
if (drawing.getContext)
{
var context = drawing.getContext("2d"),
image = document.images[0],
imageData, data,
i, len, average,
red, green, blue, alpha;
context.drawImage(image, 0, 0);
imageData = context.getImageData(0, 0, image.width, image.height);
data = imageData.data;
for (i=0, len=data.length; i < len; i+=4)
{
red = data[i];
green = data[i+1];
blue = data[i+2];
alpha = data[i+3]; //显示的而透明度
//得到平均颜色度
average = Math.floor((red + green + blue) / 3);
//这里其实是吧颜色设置为了灰白色
data[i] = average;
data[i+1] = average;
data[i+2] = average;
}
//显示在x:100, y:100的位置
imageData.data = data;
context.putImageData(imageData, 100, 100);
}
}
</script>
</body>
</html>
显示：
浙公网安备 33010602011771号