21天好习惯活动的最后一期了，虽然活动结束了，但是我会继续在这里分享我的学习成功和学习中解决的问题的，今天复习一下HTML的知识，其实关于图形的绘制之前没有怎么学，老师也没讲，感觉挺有趣的，就去图书馆借了一本前端的书
HTML5绘制图形
1添加Cavans元素
<body>
<!-- Canvas在网页中常用形式 -->
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas"); //使用id获取canvas元素
var cxt=c.getContext("2d"); //创建context对象
/* 绘制图形 ，下面两行代码绘制了一个红色的矩形 */
cxt.fillStyle="#FF0000"; //fillStyle函数将其染成红色
cxt.fillRect(0,0,150,75); //fillRect函数规定了形状、位置和尺寸
</script>
</body>在浏览器中运行
2.绘制矩形
| 函数 | 功能 |
| fillRect | 绘制一个矩形，该矩形区域没有边框，只有填充颜色。4个参数，前两个表示左上角的坐标位置，第3个参数为长度，第4个参数为高度 |
| strockRect | 绘制一个带边框的矩形，4个参数同上 |
| clearRect | 清除一个矩形区域，被清除的区域没有任何线条，4个参数解释如上 |
<body>
<!-- Canvas在网页中常用形式 -->
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas"); //使用id获取canvas元素
var cxt=c.getContext("2d"); //创建context对象，强制必须支持2D
/* 绘制图形 ，下面两行代码绘制了一个红色的矩形 */
cxt.fillStyle="rgb(0,0,200,0.5)"; //fillStyle函数将其染成蓝色，透明度为50%
cxt.fillRect(10,20,100,100); //fillRect函数规定了形状、位置和尺寸
cxt.strokeRect(110,120,80,80)
cxt.clearRect(30,40,60,60)
</script>
</body>在浏览器中运行
3.绘制圆形
| 函数 | 功能 |
| beginPath() | 开始绘制路径 |
| arc(x,y,radious,startAngle, endAngle,anticlockwise) | (x,y)定义园的原点，radious半径startAngle,endAngle是弧度，anticlockwise定义画圆的方向，值为true或false |
| closePath() | 结束路径绘制 |
| fill() | 进行填充 |
| strock | 方法绘制边框 |
<body>
<!-- Canvas在网页中常用形式 -->
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas"); //使用id获取canvas元素
var cxt=c.getContext("2d"); //创建context对象，强制必须支持2D
/* 绘制图形 ，下面两行代码绘制了一个红色的矩形 */
cxt.fillStyle="#FFaa00";
cxt.beginPath(); //开启绘制路径
cxt.arc(70,70,45,0,Math.PI*2,true) //绘制圆形
cxt.closePath(); //关闭绘制路径
cxt.fill(); //填充
</script>
</body>在浏览器中运行
4.绘制直线
| 函数 | 功能 |
| moveTo(x,y) | 不绘制，只是将当前位置移动到新坐标（x,y）,作为线条开始点 |
| lineTo(x,y) | 绘制线条到指定目标坐标（x,y）,在这两个坐标间画一条直线，目前还不绘制图形，因为没有调用strockStyle和fill |
| strockeStyle | 指定线条颜色 |
| lineWidth | 设置线条粗细 |
<body>
<!-- Canvas在网页中常用形式 -->
<canvas id="myCanvas" width="300" height="200" style="border: 1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas"); //使用id获取canvas元素
var cxt=c.getContext("2d"); //创建context对象，强制必须支持2D
/* 绘制图形 ，下面两行代码绘制了一个红色的矩形 */
cxt.beginPath(); //开启绘制路径
cxt.strokeStyle="rgb(0,182,0)";
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.lineWidth=14;
cxt.stroke();
cxt.closePath(); //关闭绘制路径
</script>
</body>在浏览器中运行
5.使用bezierCurveTo绘制贝济埃曲线
方法bezierCurveTo具体格式
bezierCurveTo( cpX1 , cpY1 , cpX2 , cpY2 , x , y )
cpX1,cpY1:和曲线的开始点（当前位置）相关联的控制点的坐标
cpX2,cpY2:和曲线结束点相关联的控制点的坐标
x,y:曲线结束点的坐标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id); //使用id获取canvas元素
if(canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#eeeeff";
context.fillRect(0,0,400,300); //绘制一个矩形
var n=0;
var dx=150;
var dy=150;
var s=100;
context.beginPath();
context.globalCompositeOperation='and';
context.fillStyle='rgb(100,255,100)';
context.strokeStyle="rgb(0,0,100)";
var x=Math.sin(0);
var y=Math.cos(0);
var dig=Math.PI/15*11;
for(var i=0,i<30;i++)
{
var x=Math.sin(i*dig);
var y=Math.cos(i*dig);
context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
}
context.closePath();
context.fill();
context.stroke();
}
</script>
</head>
<body onload="draw('canvas');">
<canvas id="canvas" width="400" height="300" />
</body>
</html>
出现问题：在浏览器中运行未出现效果
综合实例1-绘制商标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function drawAdidas()
{ //取得canvas元素及其绘制上下文
var canvas=document.getElementById('adidas');
var context=canvas.getContext('2d');
//保存当前绘图状态
context.save();
//开始绘制打勾的轮廓
context.beginPath();
context.moveTo(53,0);
//绘制上半部分曲线，第一组坐标为控制点，决定曲线的曲率，第二组坐标为终点
context.quadraticCurveTo(30,79,99,78);
context.lineTo(371,2);
context.lineTo(74,134);
context.quadraticCurveTo(-55,124,53,0);
//红色填充
context.fillStyle="#da251c";
context.fill();
//3像素描边
context.lineWidth=3;
//连接处平滑
context.lineJoin='round';
context.strokeStyle="#d40000";
context.stroke();
//恢复原有绘图状态
context.restore();
}
window.addEventListener("load",drawAdidas,true);
</script>
</head>
<body >
<canvas id="adidas" width="375px" height="132px" style="border: 1px solid #000;">
</canvas>
</body>
</html>
在浏览器中运行
综合实例2-绘制时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="200" height="200" style="border: 1px solid #000;">
您的浏览器不支持Canvas
</canvas>
<script type="text/javascript" language="JavaScript" charset="UTF-8">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (ctx) {
var timerId;
var frameRate = 60;
function canvObject() {
this.x = 0;
this.y = 0;
this.rotation = 0;
this.broderWidth = 2;
this.borderColor = '#000000';
this.fill = false;
this.fillColor = '#ff0000';
this.update = function() {
if (!this.ctx)
throw new Error('您没有指定ctx对象');
var ctx = this.ctx;
ctx.save();
ctx.lineWidth = this.broderWidth;
ctx.strokeStyle = this.borderColor;
ctx.fillStyle = this.fillColor;
ctx.translate(this.x, this.y);
if (this.rotation)
ctx.rotate(this.rotation * Math.PI / 180);
if (this.draw) this.draw(ctx);
if (this.fill) ctx.fill();
ctx.stroke();
ctx.restore();
}
};
function Line() {};
Line.prototype = new canvObject();
Line.prototype.fill = false;
Line.prototype.start = [0, 0];
Line.prototype.end = [5, 5];
Line.prototype.draw = function(ctx) {
ctx.beginPath();
ctx.moveTo.apply(ctx, this.start);
ctx.lineTo.apply(ctx, this.end);
ctx.closePath();
};
function Circle() {};
Circle.prototype = new canvObject();
Circle.prototype.draw = function(ctx) {
ctx.beginPath();
ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
ctx.closePath();
};
var circle = new Circle();
circle.ctx = ctx;
circle.x = 100;
circle.y = 100;
circle.radius = 90;
circle.fill = true;
circle.borderWidth = 6;
circle.fillColor = '#fff';
var hour = new Line();
hour.ctx = ctx;
hour.x = 100;
hour.y = 100;
hour.borderColor = '#ffff00';
hour.borderWidth = 10;
hour.rotation = 0;
hour.start = [0, 20];
hour.end = [0, -50];
var minute = new Line();
minute.ctx = ctx;
minute.x = 100;
minute.y = 100;
minute.borderColor = '#ff557f';
minute.borderWidth = 7;
minute.rotation = 0;
minute.start = [0, 20];
minute.end = [0, -70];
var seconds = new Line();
seconds.ctx = ctx;
seconds.x = 100;
seconds.y = 100;
seconds.borderColor = '#55aaff';
seconds.borderWidth = 4;
seconds.rotation = 0;
seconds.start = [0, 20];
seconds.end = [0, -80];
var center = new Circle();
center.ctx = ctx;
center.x = 100;
center.y = 100;
center.radius = 5;
center.fill = true;
center.fillColor = '#ffff00';
for (var i = 0, ls = [], cache; i < 12; i++){
cache = ls[i] = new Line();
cache.ctx = ctx;
cache.x = 100;
cache.y = 100;
cache.borderColor = '#ffff00';
cache.borderWidth = 2;
cache.rotation = i * 30;
cache.start = [0, -70];
cache.end = [0, -80];
}
timerId = setInterval(function()) {
ctx.clearColor(0, 0, 200, 200);
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 200, 200)
//盘表
circle.update();
//刻度
for (var i = 0; cache = ls[i++];) cache.update();
hour.rotation = (new Date()).getHours() * 30;
hour.update();
minute.rotation = (new Date()).getMinutes() * 6;
minute.update();
seconds.rotation = (new Date()).getSeconds() * 6;
seconds.update();
center.update();
}, (1000 / frameRate) | 0);
}
else {
alert('您的浏览器不支持Canvas无发预览时钟！');
}
</script>
</body>
</html>
在运行未出现动态时钟？
1636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
