您的位置：首页 > Web前端 > HTML5

Html5 Canvas 系列_绘图一

2017-01-16 15:28 337 查看

<!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">
// 初始化Canvas
function init_canvas(canvas_id){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
return canvas.getContext("2d");
}

//	绘制线条公用方法
//	context	Canvas	容器	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 绘图开始学习，分享一下二天下来的成果，效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web html5 canvas

相关文章推荐

新的分享

章节导航