Canvas基础

Canvas基础

大道至简

html

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML> 
<html style="height:100%"> 
<head>
<title>canvas基础</title>
<meta charset="utf-8"/>
<script src="canvas_demo.js"></script>
</head>
<body style="height:100%">
<canvas id="canvas">
请升级浏览器
</canvas>
</body>
</html>

  

js

canvas_demo.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
var canvas=document.getElementById("canvas");  
var context=canvas.getContext("2d");
canvas.width=document.body.clientWidth;
canvas.height=document.body.clientHeight;
 
context.beginPath()
context.moveTo(0,0);
context.lineTo(500,500);
context.lineWidth=5;
context.closePath()
 
context.strokeStyle="red";
context.stroke();
 
context.beginPath()
context.arc(500,200,150,0,2*Math.PI,true);
context.closePath()
 
context.strokeStyle="blue";
context.stroke();
 
context.beginPath()
context.moveTo(800,200)
context.lineTo(1200,100)
context.lineTo(1400,500)
context.closePath()
 
context.fill()
 
context.fillRect(1400,300,100,100)
 
 
context.beginPath()
context.moveTo(1400,100)
context.lineTo(1600,400)
context.closePath()
 
var gnt1=context.createLinearGradient(1400,100,1600,400)
gnt1.addColorStop(0,'red')
gnt1.addColorStop(1,'yellow')
context.strokeStyle=gnt1
context.stroke()
 
var gnt2=context.createLinearGradient(100,0,300,0)
gnt2.addColorStop(0,'green')
gnt2.addColorStop(0.5,'red')
gnt2.addColorStop(1,'yellow')
context.fillStyle=gnt2
context.fillRect(100,600,200,100)
 
context.beginPath()
context.arc(600,800,100,0,1.5*Math.PI,true)
context.closePath()
 
context.stroke()
 
 
var gtn=context.createRadialGradient(1200,600,50,1200,700,200)
gtn.addColorStop(1,"blue")
gtn.addColorStop(0,"red")
context.fillStyle=gtn
context.fillRect(1000,500,400,400)

  

demo

demo

动态时间

posted @   最后的武士  阅读(170)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· DeepSeek+PageAssist实现本地大模型联网
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· 从 14 秒到 1 秒:MySQL DDL 性能优化实战
点击右上角即可分享
微信分享提示