<!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,100); //绘制空心正方形 context.strokeRect(x,height); *************************************绘制线条*********************************************************************************************** context.beginPath(); //开始路径 context.moveto(40,40); //设置路径原点 context.lineto(340,340); //设置路径终点 context.closePath(); //结束路径 context.stroke(); //开始绘制 *************************************绘制圆形*********************************************************************************************** context.beginPath(); //开始路径 context.arc(230,90,50,Math.PI*2,false); //绘制一个圆 context.arc(x,radius,startAngle,endAngle,anticlockwise); context.closePath(); //结束路径 context.fillStyle = "rgb(255,0)"; //颜色 context.fill(); //填充路径 **************************************绘制风格********************************************************************************************** context.linewidth = 5; //家粗线条 context.beginPath(); //开始路径 context.moveto(40,40); //设置路径原点 context.lineto(40,340); //设置路径终点 context.closePath(); //结束路径 context.stroke(); //开始绘制 context.strokeRect(200,100); context.linewidth = 10; //家粗线条 context.beginPath(); //开始路径 context.moveto(80,40); //设置路径原点 context.lineto(80,340); //设置路径终点 context.closePath(); //结束路径 context.stroke(); //开始绘制 context.strokeRect(400,100); ***************************************绘制文字*********************************************************************************************** var text = "Hello World!"; context.font = "italic 60px serif"; context.strokeText(text,100); ***************************************擦除Canvas********************************************************************************************* context.fillRect(40,height); context.clearRect(40,50); //擦除Canvas context.clearRect(0,canvas.width(),canvas.height()); //擦除全部,但是重新绘制时，图形的一些属性不会变 ***************************************重置Canvas********************************************************************************************* context.fillRect(40,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,canvas.height()); } resizeCanvas(); }); </script> </head> <body> <canvas id="myCanvas" width="1000" height="1000"> </canvas> </body> </html>
