html5中canvas的一个简单的例子
作者：袖梨
2022-06-25
买了两本关于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的几个简单的常用功能了，它还有更强大的功能以后小编为各位补充上。
