<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas画布</title> </head> <body> <img src="img/shuijiao.jpg" id="img1" width="400px" height="500px" style="display: none;" /> <canvas id="canvas" width="1024" height="568" style="border: 1px solid black;"> //浏览器不支持canvas,会显示文字! 浏览器不支持!!! </canvas> </body> <script type="text/javascript"> var canvas = document.getElementById("canvas"); //导入上下文环境 var cxt = canvas.getContext("2d");//2d绘图 canvas.width = 1024; canvas.height= 568; cxt.beginPath(); //绘制直线 //确定直线两端点 cxt.moveTo(200,100); cxt.lineTo(700,400); cxt.lineTo(10,500); cxt.lineTo(200,100); cxt.closePath(); //给直线加颜色 cxt.strokeStyle = "red"; //调用方法绘制直线 cxt.stroke(); //声明填充颜色 cxt.fillStyle = "blue"; //调用方法填充 cxt.fill(); cxt.beginPath();//设置分区 cxt.moveTo(400,100); cxt.lineTo(800,500); cxt.closePath(); cxt.lineWidth = 5; cxt.strokeStyle = "green"; cxt.stroke(); //定义字体 //必须放在上面颜色填充才会起作用 cxt.fillStyle = "blue"; cxt.fill(); cxt.font = "50px 微软雅黑"; cxt.strokeText("Hello Girls",200,220); //给字体填充颜色 cxt.fillText("Hello Boys",300,300); //线性渐变 var grd = cxt.createLinearGradient(0,50,1024,0);//0,50起点 1024,0终点 grd.addColorStop(0,"#FF00FF"); grd.addColorStop(0.5,"#00FFFF"); grd.addColorStop(1,"#FFFF00"); cxt.fillStyle = grd;//填充什么颜色 cxt.fillRect(0,0,1024,50);//1024矩形区域宽度;50矩形区域高度 //圆弧 /*500圆心X轴坐标,300圆心Y轴坐标,0起始弧度值,1.5*Math.PI,终止弧度值,false顺时针转*/ cxt.lineWidth = 5; cxt.strokeStyle = "red"; cxt.beginPath(); cxt.arc(500,300,200,0,1.3*Math.PI,false); cxt.stroke(); //一组圆弧 for(var i=0; i<10;i++){ cxt.beginPath(); //50+i*100,圆心X轴坐标 cxt.arc(50+i*100,100,40,0,2*Math.PI*(i+1)/10,false); //不是原型时图形不闭合,加了就可以让图形闭合起来 cxt.closePath(); cxt.stroke(); } for(var i=0; i<10;i++){ cxt.beginPath(); cxt.arc(50+i*100,200,40,0,2*Math.PI*(i+1)/10,false); cxt.closePath(); cxt.stroke(); //填充颜色 cxt.fillStyle = "aqua"; cxt.fill(); } //图片 var img = document.getElementById("img1"); //图片加载函数 img.onload = function(){ cxt.drawImage(img,300,100); } //移动 旋转效果 cxt.fillStyle = "pink"; cxt.fillRect(0,0,350,100); //参数一: 水平缩放 参数二: 垂直方向倾斜 cxt.transform(1,0,0.5,1,50,10); cxt.fillStyle = "chocolate"; cxt.fillRect(0,0,350,100); </script> </html>
新学的cancas画布，每一部分都有相应代码即解释