<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<canvas id="drawing" style="background-color:#FFC" width="1530" height="800">
canvas有自己的宽高，背景色。canvas就是一张画布
</canvas>
<script>
var canvas = document.getElementById("drawing");
//取得2d上下文，绘制2d图形
var ctx = canvas.getContext("2d");
//lineWidth指定线条的宽度
ctx.lineWidth = 2;
//lineJoin指定两线相交处的方式，圆交round,斜交bevel，斜接miter
ctx.lineJoin = "square";
//lineCap控制线条末端的形状，平头butt,圆头round,方头squar
ctx.lineCap = "butt";
//beginPath()预示开始一条路径，用moveTo(),lineTo(),arcTo(),arc()等方法设置路径
ctx.beginPath();
//绘制外圆
//startAngel和endAngel都为弧度，false表示弧度的值是按顺时针算还是逆时针算，但是在绘制线条时是按逆时针绘制的
ctx.arc(100,100,99,0,2*Math.PI,false);//默认起始绘制点在圆的最右点
//绘制内圆
ctx.moveTo(194,100);//将画笔移到(100,100)的位置，不画线，否则会绘制多余的直线
ctx.arc(100,100,94,0,2*Math.PI,false);
//绘制分针
ctx.moveTo(100,100);
ctx.lineTo(100,15);
//绘制时针
ctx.moveTo(100,100);
ctx.lineTo(35,100);
//描边
ctx.stroke();
alert("Point(100,100) is in the path?"+ctx.isPointInPath(100,100));
</script>
</body>
</html>
时间： 2024-08-15 22:46:26