最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
html5中canvas的一个简单的例子
时间：2022-06-25 18:21:31 编辑：袖梨 来源：一聚教程网
买了两本关于HTML5的书，一本《HTML5揭秘》，一本《HTML5高级程序设计》，现在在看《html5揭秘》网上说这本书是非常入门的一本，《HTML5权威指南》就相对深一点。所以买了揭秘，没买指南。都说HTML5的canvas很重要，所以这里把书上关于canvas的一些简单例子，给试着自己写了一遍，放上来把
| 代码如下 | 复制代码 |
| window.onload = function(){ var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); /* context.fillStyle = "#5746CD"; context.fillRect(50,25,100,100); context.strokeStyle = "#1245d8"; context.strokeRect(50,25,200,200); */ //画一个坐标系 /* context.font = "bold 13px sans-serif"; context.beginPath(); for(var x = 0.5;x < 500;x = x + 10) { context.moveTo(x,0); context.lineTo(x,490); if((x - 0.5)%50 == 0) { context.fillText(x-0.5,0,x); } } for(var y = 0.5;y < 500;y = y + 10) { context.moveTo(0,y); context.lineTo(490,y); if((y - 0.5)%50 == 0) { context.fillText(y-0.5,y,10); } } context.strokeStyle = "#dddddd"; context.stroke(); context.beginPath(); //垂直箭头 context.moveTo(30,20); context.lineTo(30,480); context.moveTo(20,470); context.lineTo(30,480); context.moveTo(40,470); context.lineTo(30,480); //水平箭头 context.moveTo(30,20); context.lineTo(480,20); context.moveTo(470,10); context.lineTo(480,20); context.moveTo(470,30); context.lineTo(480,20); context.strokeStyle = "#000000"; context.stroke(); //文字 //context.textBaseline = "top"; context.fillText("X",460,10); context.fillText("Y",0,470); context.fillText("(500,500)",400,470); */ //渐变 //var gradient = context.createLinearGradient(0,0,0,300);//线性渐变 var gradient = context.createRadialGradient(50,50,30,60,60,50);//径向渐变 gradient.addColorStop(0,"black"); gradient.addColorStop(1,"white"); context.fillStyle = gradient; context.fillRect(0,0,300,225); canvas.onclick = function(){ //context.strokeRect(10,10,100,300); //context.clearRect(60,30,70,70); } } | |
其实本文章就介绍了html5中canvas的几个简单的常用功能了，它还有更强大的功能以后小编为各位补充上。
相关文章
- TikTok国际版官网下载入口-安全访问全球版TikTok 12-15
- 新三国志曹操传马超无双试炼四通关攻略 12-15
- 俄罗斯YANDEX引擎官网入口-免登录直达Yandex首页 12-15
- 漫蛙ManWa在线免费阅读入口_漫蛙ManWa官方网页版一键直达 12-15
- 逃离鸭科夫仓库区地窖在哪 仓库区地窖入口位置详情 12-15
- 光与影33号远征队熙艾尔bd玩法：熙艾尔毕业装备与加点思路介绍 12-15