HTML5读书笔记之三：Canvas基础知识
浏览数：32 /
时间：2015年06月09日
<!doctype html>
<head>
<title>Canvas Test</title>
<meta charset="UTF-8">
<link href="./css/canvas.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./jquery/jquery-1.11.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
/************************************绘制正方形*********************************************************************************************
context.fillRect(40, 40, 100, 100); //绘制实心正方形 context.fillRect(x, y, width, height);
context.strokeRect(40, 40, 100, 100); //绘制空心正方形 context.strokeRect(x, y, width, height);
*************************************绘制线条***********************************************************************************************
context.beginPath(); //开始路径
context.moveTo(40, 40); //设置路径原点
context.lineTo(340, 340); //设置路径终点
context.closePath(); //结束路径
context.stroke(); //开始绘制
*************************************绘制圆形***********************************************************************************************
context.beginPath(); //开始路径
context.arc(230, 90, 50, 0, Math.PI*2, false); //绘制一个圆 context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.closePath(); //结束路径
context.fillStyle = "rgb(255, 0, 0)"; //颜色
context.fill(); //填充路径
**************************************绘制风格**********************************************************************************************
context.lineWidth = 5; //家粗线条
context.beginPath(); //开始路径
context.moveTo(40, 40); //设置路径原点
context.lineTo(40, 340); //设置路径终点
context.closePath(); //结束路径
context.stroke(); //开始绘制
context.strokeRect(200, 40, 100, 100);
context.lineWidth = 10; //家粗线条
context.beginPath(); //开始路径
context.moveTo(80, 40); //设置路径原点
context.lineTo(80, 340); //设置路径终点
context.closePath(); //结束路径
context.stroke(); //开始绘制
context.strokeRect(400, 40, 100, 100);
***************************************绘制文字***********************************************************************************************
var text = "Hello World!";
context.font = "italic 60px serif";
context.strokeText(text, 40, 100);
***************************************擦除Canvas*********************************************************************************************
context.fillRect(40, 40, 100, 100); //绘制实心正方形 context.fillRect(x, y, width, height);
context.clearRect(40, 40, 50, 50); //擦除Canvas
context.clearRect(0, 0, canvas.width(), canvas.height()); //擦除全部,但是重新绘制时，图形的一些属性不会变
***************************************重置Canvas*********************************************************************************************
context.fillRect(40, 40, 100, 100); //绘制实心正方形 context.fillRect(x, y, width, height);
canvas.attr("width", canvas.width()); //重置canvas的高和宽，绘制图形之前设置的属性（样式，颜色）也一并清除
canvas.attr("height", canvas.height());
***************************************Canvas填满浏览器*********************************************************************************************/
$(window).resize(resizeCanvas); //调用resize方法，当调整窗口大小的时候就会触发
//当调整窗口时仍完美的填满整个窗口，而不会出现滚动条或者出现白框
function resizeCanvas(){
canvas.attr("width", $(window).get(0).innerWidth); //$(window).get(0).innerWidth 使用window浏览器对象和jQuery方法获取窗口的宽和高
canvas.attr("height", $(window).get(0).innerHeight); //用到了重置canvas高和宽 不使用$(window).height()，因为似乎并不支持所有浏览器
context.fillRect(0, 0, canvas.width(), canvas.height());
}
resizeCanvas();
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000">
</canvas>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
