<!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);//擦除Canvascontext.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>
懂得倾听别人的忠告。
