HTML绘图（一）：＜canvas＞

阅读：评论：0

HTML绘图（一）：＜canvas＞

注意： ① 不要用css属性来设置<canvas>的宽高，避免其与初始比例不一致而产生的扭曲。 ②
由于<canvas>是HTML5新增标签，部分浏览器不支持显示该元素，当浏览器不支持<canvas>渲染时，需要显示替代内容；支持时则会忽略其中的替代内容。

<!--文本替换-->
<canvas>你的浏览器不支持 canvas，请升级你的浏览器。
</canvas><!--<img>替换-->
<canvas><img src="./美女.jpg" alt=""> 
</canvas>

2.2 渲染上下文

var canvas = ElementById('tutorial');
//获得 2d 上下文对象
var ctx = Context('2d');

当不支持时，填充替代内容

var canvas = ElementById('tutorial');if (Context){var ctx = Context('2d');// drawing code here
} else {// canvas-unsupported code here
}

3. 形状绘制

3.1 坐标空间

如下图所示，canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。栅格的起点为左上角，坐标为 (0,0) 。所有元素的位置都相对于原点来定位。

3.2 绘制矩形

<canvas>只支持一种原生的图形绘制：矩形。
canvas 提供了三种方法绘制矩形（默认颜色为黑色）：

fillRect(x, y, width, height)：绘制一个填充的矩形。
strokeRect(x, y, width, height)：绘制一个矩形的边框。
clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。

4. 绘制路径（path）

步骤：1. 创建路径起始点
2.调用绘制方法去绘制出路径
3.把路径封闭
4.一旦路径生成，通过描边或填充路径区域来渲染图形。

beginPath()
#新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径moveTo(x, y)
#把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。closePath()
#闭合路径之后，图形绘制命令又重新指向到上下文中stroke()
#通过线条来绘制图形轮廓fill()
#通过填充路径的内容区域生成实心的图形

#填充三角形
function draw(){var canvas = ElementById('tutorial');if (!Context) return;var ctx = Context("2d");ctx.beginPath();veTo(50, 50);ctx.lineTo(200, 50);ctx.lineTo(200, 200);ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
}
draw();

5.绘制动画

动画的基本步骤

清空。canvas 再绘制每一帧动画之前，需要清空所有。清空所有最简单的做法就是 clearRect() 方法。
保存 canvas 状态 。如果在绘制的过程中会更改 canvas 的状态(颜色、移动了坐标原点等)，又在绘制每一帧时都是原始状态的话，需要保存canvas的状态。
绘制动画图形这一步才是真正的绘制动画帧。
恢复 canvas 状态。如果你前面保存了 canvas 状态，则应该在绘制完成一帧之后恢复 canvas 状态。

5.1 控制动画

为了执行动画，我们需要一些可以定时执行重绘的方法。一般用到下面三个方法（这三个方法都属于浏览器的window对象的方法）：

setInterval(code,millisec[,"lang"]) 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，实现定时周期执行。
clearInterval()取消setInterval()设置的定时器

<script>function fun() {document.write("定时器"+"<br>")}//间隔200ms周期性调用函数funsetInterval("fun()",200);
</script>

setTimeout(code, millisec) 方法用于在指定的毫秒数后调用函数或计算表达式，实现倒计时。（setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()）
clearTimeout()取消setTimeout()设置的定时器。

<script>function fun() {alert("定时器")}//2000ms，也就是2s后执行fun1函数setTimeout("fun()",2000);
</script>

requestAnimationFrame()

<script>let S = 0;function fun() {document.write("定时器"+"<br>");
//        发起下一次fun执行请求requestAnimationFrame(fun);S++;}
//    开启函数fun第一次执行fun();
</script>

5.2 Demo

**示例1：**实现一个无穷循环的计时

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
ElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}function stopCount()
{
clearTimeout(t)
}
</script>
</head><body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form><p>
请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。
</p></body></html>

**示例2：**一个简单的数字时钟

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h&#Hours()
var m&#Minutes()
var s&#Seconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
ElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}function checkTime(i)
{
if (i<10) {i="0" + i}return i
}
</script>
</head><body onload="startTime()">
<div id="txt"></div>
</body>
</html>

**示例3：**一个简单的时钟表盘

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</title>
<style>body {padding: 0;margin: 0;background-color: rgba(0, 0, 0, 0.1)}canvas {display: block;margin: 200px auto;}
</style>
</head>
<body>
<canvas id="solar" width="300" height="300"></canvas>
<script>
init();function init(){let canvas = document.querySelector("#solar");let ctx = Context("2d");draw(ctx);
}function draw(ctx){requestAnimationFrame(function step(){drawDial(ctx); //绘制表盘drawAllHands(ctx); //绘制时分秒针requestAnimationFrame(step);});
}
/*绘制时分秒针*/
function drawAllHands(ctx){let time = new Date();let s = Seconds();let m = Minutes();let h = Hours();let pi = Math.PI;let secondAngle = pi / 180 * 6 * s;  //计算出来s针的弧度let minuteAngle = pi / 180 * 6 * m + secondAngle / 60;  //计算出来分针的弧度let hourAngle = pi / 180 * 30 * h + minuteAngle / 12;  //计算出来时针的弧度drawHand(hourAngle, 60, 6, "red", ctx);  //绘制时针drawHand(minuteAngle, 106, 4, "green", ctx);  //绘制分针drawHand(secondAngle, 129, 2, "blue", ctx);  //绘制秒针
}
/*绘制时针、或分针、或秒针* 参数1：要绘制的针的角度* 参数2：要绘制的针的长度* 参数3：要绘制的针的宽度* 参数4：要绘制的针的颜色* 参数4：ctx* */
function drawHand(angle, len, width, color, ctx){ctx.save();anslate(150, 150); //把坐标轴的远点平移到原来的中心ate(-Math.PI / 2 + angle);  //旋转坐标轴。 x轴就是针的角度ctx.beginPath();veTo(-4, 0);ctx.lineTo(len, 0);  // 沿着x轴绘制针ctx.lineWidth = width;ctx.strokeStyle = color;ctx.lineCap = "round";ctx.stroke();ctx.closePath();store();
}/*绘制表盘*/
function drawDial(ctx){let pi = Math.PI;ctx.clearRect(0, 0, 300, 300); //清除所有内容ctx.save();anslate(150, 150); //一定坐标原点到原来的中心ctx.beginPath();ctx.arc(0, 0, 148, 0, 2 * pi); //绘制圆周ctx.stroke();ctx.closePath();for (let i = 0; i < 60; i++){//绘制刻度。ctx.save();ate(-pi / 2 + i * pi / 30);  //旋转坐标轴。坐标轴x的正方形从 向上开始算起ctx.beginPath();veTo(110, 0);ctx.lineTo(140, 0);ctx.lineWidth = i % 5 ? 2 : 4;ctx.strokeStyle = i % 5 ? "blue" : "red";ctx.stroke();ctx.closePath();store();}store();
}
</script>
</body>
</html>

本文发布于:2024-02-01 03:32:26，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170672954833560.html

上一篇：C#用户控件之温度计设计

下一篇：GSM

标签：HTML canvas

留言与评论（共有 0 条评论）

HTML绘图（一）：＜canvas＞

HTML绘图（一）：＜canvas＞

目录

1.Canvas简介

2.基本使用

2.1 元素

2.2 渲染上下文

3. 形状绘制

3.1 坐标空间

3.2 绘制矩形

4. 绘制路径（path）

5.绘制动画

5.1 控制动画

5.2 Demo