HTML5+CSS

最新推荐文章于 2024-08-14 09:51:48 发布

Andrewliu20

最新推荐文章于 2024-08-14 09:51:48 发布

阅读量361

点赞数 1

分类专栏： html 文章标签： html5 css

本文链接：https://blog.csdn.net/u011507561/article/details/48655275

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.移动坐标空间

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script lang="javascript">

window.οnlοad=function(){
draw();
}
function drawTop(ctx,fillStyle){
ctx.fillStyle = fillStyle;
ctx.beginPath();
ctx.arc(0,0,30,0,Math.PI,true);
ctx.closePath();
ctx.fill();
}

function drawGrip(ctx){
ctx.save();
ctx.fillStyle = "blue";
ctx.fillRect(-1.5,0,1.5,40);
ctx.beginPath();
ctx.StrokeStyle = "blue";
ctx.arc(-5,40,4,Math.PI,Math.PI*2,true);
ctx.stroke();
ctx.closePath();
ctx.restore();
}

function draw() {
var ctx = document.getElementById("moveSpace").getContext("2d");
ctx.translate(80,80);
for(var i=1;i<10;i++){
ctx.save();
ctx.translate(60*i,0);
drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)");
drawGrip(ctx);
ctx.restore();
}
}

</script>
</head>
<body>
<div id="div1">
<canvas id="moveSpace" width="700" height="300"></canvas>
</div>
</body>
</html>

2.图形变换

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
<canvas id="imageChage" style="border: 1px solid;" width="300"
height="200"></canvas>

<script type="text/javascript">
var c = document.getElementById("imageChage");
if (c.getContext) {
var context = c.getContext("2d");
//开始绘制长方形
context.fillStyle = "blue";
context.strokeStyle = "red";
context.fillRect(20, 20, 100, 100);
context.strokeRect(20, 20, 100, 100);
context.fill();
context.stroke();
//保存当前canvas状态
context.save();
//绘制另一个矩形
//context.globalCompositeOperation= "source-over";
context.fillStyle = "yellow";
context.strokeStyle = "green";
context.strokeRect(140, 20, 100, 100);
context.fillRect(140, 20, 100, 100);
context.fill();
context.stroke();
///恢复第一个矩形的状态
context.restore();
//绘制两个矩形
context.fillRect(20, 140, 50, 50);
context.strokeRect(80, 140, 50, 50);

}
</script>
</body>
</html>

3.清空画布

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function clearMap(){
context.clearRect(0,0,200,200);
}
</script>
</head>
<body>
<canvas id="drawTriangle" style="border:1px solid;" width="200" heigth="200"></canvas>
<script type="text/javascript">
var c = document.getElementById("drawTriangle");
if(c.getContext){
var context = c.getContext("2d");
context.strokeStyle="#FF00FF";
context.beginPath();
context.moveTo(25,25);
context.lineTo(150,25);
context.lineTo(25,150);
context.closePath();
context.stroke();
}
</script>
<br />
<input name="" type="button" value="清空画布" οnclick="clearMap()"/>
</body>
</html>

Andrewliu20

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS

1.移动坐标空间Insert title herewindow.onload=function(){draw();}function drawTop(ctx,fillStyle){ctx.fillStyle = fillStyle;ctx.beginPath();ctx.arc(0,0,30,0,Math.PI,true);
复制链接

扫一扫

专栏目录