画布标签
只有IE9之后才支持画布
<canvas id="lookwhatIdrew" width="600" height="200" ></canvas>浏览器会根据宽度和高度在页面中为画布分配一些空间
画布默认是透明背景,所以没有绘制内容的话,在浏览器里是看不到的,我们可以增加一个css样式边框来显示出画布的大小和位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="lookwhatIdrew" width="600" height="200" ></canvas>
</body>
</html>如下图所示
画布是透明的,所以可以叠加
在画布上画一个黑色方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid black;
}
</style>
<script>
window.onload=function () {
var canvas = document.getElementById("lookwhatIdrew");//获取画布句柄
var context = canvas.getContext("2d");//需要指明2d上下文
context.fillRect(10,10,100,100);//画一个矩形,参数依次为 x坐标,y坐标,宽度,高度
}
</script>
</head>
<body>
<canvas id="lookwhatIdrew" width="600" height="200" ></canvas>
</body>
</html>如下图所示
画矩形填充方法,没有填充色
填充色是通过context上下文设置的
context.fillStyle = "black";//设置要填充的颜色
context.fill();//填充妥善的处理不支持画布的浏览器标签提示,浏览器遇到不认识的标签时候,默认行为就是显示其中包含的文本.
<canvas id="lookwhatIdrew" width="600" height="200" >Hey you,yes YOU,upgrade your browser!!</canvas>也可以通过javascript来检测浏览器支不支持画布
画一个三角形
context.beginPath();//开始一个新路径
context.moveTo(100,150);//路径起点
context.lineTo(250,75);//从当前位置描到画布上的另一个点
context.lineTo(125,30);
context.closePath();////将路径的起点连接到最后一个点
context.lineWidth = 5;//线宽
context.stroke();//用线描述路径
context.fillStyle = "red";//设置颜色为红色来填充路径内区域
context.fill();//填充颜色画一个圆
context.beginPath();
context.arc(x,y,radius,0,degreesToRadians(360),true);
//x,y圆心坐标,radius半径,0弧度起点/degreesToRadians(360)弧度终点,true顺时针/false逆时针
context.fillStyle = "lightblue";
context.fill();
function degreesToRadians(degrees) {
return (degrees * Math.PI)/180;
}画一个现有图片
var birdImage = new Image();
birdImage.src = "bird.png";
context.drawImage(birdImage,x,y,width,height);画一个text
context.textAlign = "left";//左对齐 start,left 居中 center 有对齐 end,right
context.fillText("Text",x,y.maxwidth);//填充文本 x,y坐标 可选参数maxwidth,会导致文本相应缩放
context.strokeText("Text",x,y.maxwidth);//笔划文本
context.font = "2em Lucida Grande";//字体属性
context.textBaseline = "middle";//在文本所在的x,y坐标上画一条线清除画布区域
context.clearRect(0,0,canvas.width,canvas.height);
2205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
