canvas元素上简单绘制示例
2019-02-18 本文已影响0人
gis杭州
image.png
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="Mirror">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Draw a red rectangle </title>
<script>
function main() {
//获取<canvas>标签
var canvas = document.getElementById("myCanvas");
//如果没找到<canvas>标签，则输出错误信息
if (!canvas) {
console.log('Failed to retrieve the <canvas> element.');
return;
}
//要在<canvas>上绘制图像，须先获取绘图上下文，“2d”代表我们要绘制二维图形。
var ctx = canvas.getContext("2d");
//fillstyle：设置或返回用于填充绘画的颜色、渐变或模式；这里我们设置填充颜色为红色。
ctx.fillStyle = "red";
/*
使用填充颜色填充矩形。
fillRect(x,y,width,height)
x 矩形左上角的 x 坐标
y 矩形左上角的 y 坐标
width 矩形的宽度
height 矩形的高度
*/
ctx.fillRect(150, 210, 150, 650);
}
</script>
</head>
<!--页面加载完成后，执行JavaScript中的main()函数-->
<body onload="main()">
<!--定义<canvas>标签，通过width属性和height属性规定它是一片400×400的绘制区域-->
<canvas id="myCanvas" width="400" height="400">
<!--当浏览器不支持时，会直接忽略<canvas>标签，而直接显示下面这一行提示-->
Please use a browser that supports "canvas".
</canvas>
</body>
</html>
