专业编程基础技术教程

网站首页 > 基础教程 正文

canvas——填充矩形 canvas画圆并填充颜色

ccvgpt 2024-10-12 13:34:18 基础教程 9 ℃

填充矩形

<!DOCTYPE html>
<html>
<head>
<meta charset=" ">
<title>填充矩形</title>
<script type="text/javascript">
function draw(){
    var canvas = document.getElementById('myCanvas');
    if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    ctx.fillStyle = "rgba(0,0,200,0.5)";
    ctx.fillRect(50,30,150,75);
    }
}
</script>
<!--style标记内是CSS语法-->
<style type="text/css">
canvas { border: 1px solid black; } //将框线设为1px
</style>
</head>
<body onload="draw();">
<canvas id="myCanvas"></canvas>
</body>
</html>

canvas使用步骤说明：

canvas——填充矩形 canvas画圆并填充颜色

1 <canvas>创建的绘图区一开始是空白的,首先需要使用JavaScript的getElementById获取DOM的canvas元素(element)。

var canvas = document.getElementById('myCanvas');

2 为了避免不支持canvas的浏览器运行JavaScript时出现错误,可以先用if条件测试是否能获取canvas的getContext方法

if(canvas.getContext){
//但getContext存在时,会运行这里的语句
}else{
//但getContext不存在时,会运行这里的语句
}

3 创建2d context对象

var ctx = canvas.getContext("2d');

4 使用fillStyle属性指定图形的颜色为红色

ctx.fillStyle = "#FF00000";
ctx.fillStyle = "rgba(0,0,200,0.5)";

5 fillRect属性用于绘制矩形并且指定绘制方向和大小

ctx.fillRect (0,0,150,75);

(0,0,150,75) 这4个数值分别代表矩形的起始点坐标(x,y),宽(width)和高(height)

Tags：

猜你喜欢

最近发表
标签列表