Html5 Canvas 系列_绘图一
来源:互联网 发布:windows文件名最大长度 编辑:程序博客网 时间:2024/05/22 00:42
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> Canvas 绘图</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content="cloud"> <meta name="Keywords" content="H5 Canvas 绘图"> <meta name="Description" content="使用Html5 Canvas 绘制图形"> </head><style type="text/css">#canvas{border: 1px solid #000;display:block;margin: 50px auto;}</style> <body><canvas id="canvas">您的浏览器不支持Canvas</canvas> </body><script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script><script type="text/javascript">// 初始化Canvasfunction init_canvas(canvas_id){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;return canvas.getContext("2d");}//绘制线条公用方法//contextCanvas容器x y 起点line_array 线条数组line_width 线条精细stroke_style 填充颜色//line_width line_width 为空即用默认值function pub_ph(context, x_y, line_array, line_width, stroke_style){context.moveTo(x_y[0], x_y[1]);//循环绘制线条$.each(line_array, function(i, v){ //在第一次循环中,this代表一个一维数组,将这个一维数组再次送到each函数中,遍历里面的一维函数context.lineTo(v[0], v[1]); });//设置填充颜色if(stroke_style != null)context.strokeStyle = stroke_style;//设置线条颜色if(line_width != null)context.lineWidth = line_width;context.stroke();}//|\//---- \//----| ///|/function ph1(context){var line_array = [[100, 350], [500, 350], [500, 350] , [500, 200], [700, 400], [500, 600], [500, 450], [100, 450]];pub_ph(context, [[100, 350]], line_array, 20, "#582");}//\ \ \ /// //function ph2(context){context.beginPath();context.moveTo(100, 200);context.lineTo(300, 400);context.lineTo(100, 600);context.strokeStyle = "red";context.stroke();context.beginPath();context.moveTo(300, 200);context.lineTo(500, 400);context.lineTo(300, 600);context.strokeStyle = "green";context.stroke();context.beginPath();context.moveTo(500, 200);context.lineTo(700, 400);context.lineTo(500, 600);context.strokeStyle = "blue";context.stroke();}//|\//|--- \//|---| ///|/function ph3(context){context.moveTo(100, 350);context.lineTo(500, 350);context.lineTo(500, 350);context.lineTo(500, 200);context.lineTo(700, 400);context.lineTo(500, 600);context.lineTo(500, 450);context.lineTo(100, 450);context.lineTo(100, 350);context.closePath();context.lineWidth = "10";context.strokeStyle = "#c00";context.fillStyle = "#ff0"//Canvas 基于状态绘制,设置完绘制属性进行绘制操作context.fill();context.stroke();}// _____// | |// |_____|//function ph4(context){context.lineWidth = 5;context.fillStyle = "#00f";context.strokeStyle = "#f3c";context.fillRect(200, 200, 400, 400);context.strokeRect(200, 200, 400, 400);}//五角星function ph5(context){context.beginPath();for(var i = 0; i < 5; i++){var x = Math.cos((18 + i * 72 - 30) / 180 * Math.PI) * 300 + 400;var y = -Math.sin((18 + i * 72 - 30) / 180 * Math.PI) * 300 + 400;context.lineTo(x, y);x = Math.cos((54 + i * 72 - 30) / 180 * Math.PI) * 150 + 400;y = -Math.sin((54 + i * 72 -30) / 180 * Math.PI) * 150 + 400;context.lineTo(x, y);}context.closePath();context.strokeStyle = "#f00";context.fillStyle = "#f00";context.lineWidth = 10;context.fill();context.stroke();}$(function(){var context = init_canvas("canvas");ph5(context);});</script></html>
最近在学习Html5 ,从最基础的 Canvas 绘图开始学习,分享一下二天下来的成果,效果图:
1 0
- Html5 Canvas 系列_绘图一
- Html5 Canvas 系列_绘图二
- Html5 Canvas 系列_绘图三(H5 ,CSS3 动态八卦图)
- Html5 Canvas 系列_绘图三(H5 绘制圆弧)
- Html5 Canvas 系列_绘图三(H5 拖放组件)
- Html5 系列之:Canvas绘图
- Html5 Canvas 系列_绘图三(fillStyle 样式填充 矩形、墙)
- HTML5中的Canvas绘图操作(一)
- HTML5基础之canvas绘图(一)
- 安卓鸟学Html5 之Canvas绘图实践一
- HTML5-Canvas绘图
- html5-Canvas绘图
- HTML5 Canvas 绘图入门
- HTML5 Canvas 绘图入门
- HTML5-canvas 绘图
- HTML5 Canvas绘图API
- HTML5.Canvas绘图
- HTML5-Canvas绘图基础
- Swagger之SpringMVC集成(springfox)
- magento 捆绑产品价格
- HTTPS和HTTP的区别
- iOS视频开发
- vector基本操作_迭代器遍历和种类
- Html5 Canvas 系列_绘图一
- Android下Pull生成xml与解析xml
- centos下安装visual studio code出现can't find libXss.so.1,出现这在类似怎么查找相关包
- Python中csv模块的用法
- cni 添加网络 流程分析
- [Mysql] Decimal用法
- 点滴故事-写在我个人网站的0岁生日
- Arrays:用于操作数组工具类,数组转集合,集合转数
- AIDL的理解与使用详解