Html5_canvas_demos资源-CSDN文库

共17个文件

bak：7个

html：7个

jpg：2个

HTML5

Canvas

Demos

4星 · 超过85%的资源需积分: 9 150 浏览量 2011-04-03 00:15:59 上传评论收藏 198KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

Html5_Demos.rar （17个子文件）

Html5

html5_canvas_arc.html 1KB

html5_canvas_path.html 2KB

html5_canvas.html.bak 422B

html5_canvas_image.html 1KB

html5_canvas_translate.html 2KB

html5_canvas_path.html.bak 2KB

html5_canvas_animations.html.bak 1KB

html5_canvas_image.html.bak 1KB

html5_canvas_arc.html.bak 1KB

html5_canvas_translate.html.bak 2KB

html5_canvas.html 423B

html5_canvas_animations.html 1KB

html5_canvas_gradient.html.bak 1KB

images

pic.jpg 174KB

java.png 9KB

map.jpg 5KB

html5_canvas_gradient.html 1KB

<!DOCTYPE HTML> <html> <head> <title>Html5 Canvas Path Grids</title> </head> <body> <canvas id="c" height="600" width="850"></canvas> <script type="text/javascript"> //画竖线 var c = document.getElementById("c"); var context = c.getContext("2d"); for(var x=0.5;x<800;x += 10){ context.moveTo(x,0); context.lineTo(x,600); } //画横线 for(var y=0.5;y<600;y += 10){ context.moveTo(0,y); context.lineTo(800,y); } //选择颜色 context.strokeStyle = "#ccc"; //渲染 context.stroke(); //XY坐标系 //开始新的路径 //y轴 context.beginPath(); context.moveTo(100,700); context.lineTo(100,50); context.moveTo(95,55); context.lineTo(100,50); context.lineTo(105,55); //x轴 context.moveTo(700,500); context.lineTo(0,500); context.moveTo(695,495); context.lineTo(700,500); context.lineTo(695,505); //选择颜色 context.strokeStyle = "#000"; //渲染 context.stroke(); //填充文字 context.font = "bold 16px sans-self"; context.fillText("x",710,490); context.fillText("y",90,40); context.fillText("0",80,520); //画曲线 sin曲线 context.beginPath(); context.moveTo(100,500); for(var x=100;x<700;x++){ context.lineTo(x,-100*Math.sin((x-100)*Math.PI/180)+500) } context.strokeStyle = "#FF0000"; context.stroke(); //画曲线 cos曲线 context.beginPath(); context.moveTo(100,400); for(var x=100;x<700;x++){ context.lineTo(x,-100*Math.cos((x-100)*Math.PI/180)+500) } context.strokeStyle = "#FFFF00"; context.stroke(); //画曲线 tan曲线 context.beginPath(); context.moveTo(100,400); for(var x=100;x<700;x++){ context.lineTo(x,-100*Math.tan((x-100)*Math.PI/180)+500) } context.strokeStyle = "#0000FF"; context.stroke(); </script> </body> </html>

评论收藏

内容反馈