版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39634987/article/details/77967030
//1.添加画布
<canvas id="c1" width="500px" height="500px"> <span>不支持</span> </canvas>
<script> window.onload=function(){ var oC=document.getElementById('c1') var oGC=oC.getContext('2d') //getContext返回一个用于画布上绘图的环境，目前合法的值为"2d" // oGC.fillStyle='orange' //方框填充颜色 // oGC.fillRect(50,50,100,100) //(Left,Top,Width,Height) //canvas默认填充颜色是黑色 oGC.lineWidth=10; //线宽度 oGC.lineJoin='round' //边线：圆角round 斜角bevel oGC.strokeStyle='blue' //边框填充颜色 oGC.strokeRect(50.5,50.5,100,100)//context.strokeRect(x,y,width,height);
| x | 矩形左上角的 x 坐标 |
| y | 矩形左上角的 y 坐标 |
| width | 矩形的宽度，以像素计 |
| height | 矩形的高度，以像素计 |
// oGC.beginPath() //开始绘制路径 // oGC.moveTo(100,100) //Left Top // oGC.lineTo(200,200) // oGC.lineTo(300,100) // oGC.closePath() //闭合绘制路径 会自动添加闭合线条 // oGC.stroke() //用线条连接
// oGC.fill() //填充
//ps:要对每一个绘制进行开始跟闭合，否则无法区分
oGC.lineCap='butt' //端点样式：默认 // oGC.lineCap='round' //端点样式：圆角 oGC.lineCap='square' //端点样式：长形 //实际高度多出来的是宽一半的值} </script>
2//清除画布
var oC=document.getElementById('c1') var oGC=oC.getContext('2d') oGC.beginPath() oGC.rect(50,50,100,100) //L T W H oGC.closePath() oGC.fill()
// oGC.clearRect(0,0,oC.width,oC.height)//(坐标，宽度) //清空画布（让运动连贯起来）
3.恢复与保存
var oC=document.getElementById('c1') var oGC=oC.getContext('2d') oGC.save(); //保存 oGC.fillStyle='red' oGC.beginPath() //开始绘制路径 oGC.moveTo(100,100) //Left Top oGC.lineTo(200,200) oGC.lineTo(300,100) oGC.closePath() //闭合绘制路径 会自动添加闭合线条 oGC.fill() //用线条连接 oGC.restore() //恢复 oGC.beginPath() oGC.moveTo(100,200) //Left Top oGC.lineTo(200,300) oGC.lineTo(300,300) oGC.closePath() //闭合绘制路径 会自动添加闭合线条 oGC.fill() //填充4.画圆
var oC = document.getElementById('c1'); var oGC=oC.getContext('2d'); //arc(x,y,r,起始弧度，结束弧度，旋转方向) //弧度与角度的关系：弧度=角度*Math.PI/180 //旋转方向：逆时针（true） 顺时针（false） oGC.moveTo(200,200) oGC.arc(200,200,150,-90*Math.PI/180,0,true) oGC.closePath() oGC.stroke()5.曲线
var oC = document.getElementById('c1'); var oGC=oC.getContext('2d'); //第一种曲线 // oGC.moveTo(100,200) // oGC.arcTo(100,100,300,100,50) // //（x1,y1,x2,y2,r） // oGC.stroke() //第二种贝塞尔曲线（第一种） // oGC.moveTo(100,200) // oGC.quadraticCurveTo(100,100,200,200) // //前两个是控制点的坐标 后面两个是结束点的坐标 // oGC.stroke() //第二种贝塞尔曲线（第二种） oGC.moveTo(100,200) oGC.bezierCurveTo(100,100,200,200,200,100) //前四个是控制点（两两分组）的坐标 后面两个是结束点的坐标 oGC.stroke()
6.变形
var oC = document.getElementById('c1'); var oGC=oC.getContext('2d'); //移动 oGC.fillStyle='blue'; oGC.translate(50,50) oGC.fillRect(0,0,100,100) //变形 // oGC.fillStyle='red'; // oGC.translate(100,100) // oGC.rotate(60*Math.PI/180) //方块的左上角为中心点旋转 // oGC.fillRect(0,0,100,100) //缩放 oGC.fillStyle='red'; oGC.translate(100,100) // oGC.rotate(60*Math.PI/180) //方块的左上角为中心点旋转 oGC.scale(2,1.5) //宽变成原来的两倍 高度变为原来的1.5倍 oGC.fillRect(0,0,100,100)
实例
1.方块移动
window.onload =function(){ var oC = document.getElementById('c1'); var oGC=oC.getContext('2d'); // 开始创建路径 oGC.fillRect(0,0,50,50) var num=0 setInterval(function(){ num++; oGC.clearRect(0,0,oC.width,oC.height) oGC.fillRect(num,num,50,50) },30) }2.旋转
window.onload =function(){ var oC = document.getElementById('c1'); var oGC=oC.getContext('2d'); var num=0; var num2=0; var value=1; setInterval(function(){ num++; oGC.save() oGC.clearRect(0,0,oC.width,oC.height) oGC.translate(100,100) if(num2==50){ value=-1 }else if(num2==0){ value=1 } num2+=value; oGC.scale(num2*1/50,num2*1/50) oGC.rotate(num*Math.PI/180) oGC.translate(-50,-50) oGC.fillRect(0,0,100,100) //动画是要在封闭的状态下运行的,所以要save和restore oGC.restore() },30) }
3.鼠标画图
window.onload =function(){ var oC = document.getElementById('c1'); var oGC=oC.getContext('2d'); oC.onmousedown=function(ev){ var ev=ev||window.event; oGC.moveTo(ev.clientX,ev.clientY) document.onmousemove=function(ev){ var ev=ev||window.event; oGC.lineTo(ev.clientX,ev.clientY) oGC.stroke() } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } }4.表
window.onload =function(){ var oC = document.getElementById('c1'); var oGC=oC.getContext('2d'); function draw(){ //第一步：指定中心点 var x=200; var y=200; var r=150; oGC.clearRect(0,0,oC.width,oC.height) var oDate=new Date() var oHours=oDate.getHours() var oMin=oDate.getMinutes() var oSen=oDate.getSeconds() var oHoursValue=(-90+oHours*30+oMin/2)*Math.PI/180 //弧度 var oMinValue=(-90+oMin*6)*Math.PI/180 var oSenValue=(-90+oSen*6)*Math.PI/180 //弧度必须通过角度来计算，括号中的是角度，比如：分针走半小时， //时针是多走一半（15度），就是两分钟一度 //第二步：画圆 oGC.beginPath() for(var i=0;i<60;i++){ oGC.moveTo(x,y) oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false) } oGC.closePath() oGC.stroke() //刻度盘 oGC.fillStyle="white"; oGC.beginPath() oGC.moveTo(x,y) oGC.arc(x,y,r*14/15,0,360*Math.PI/180,false) oGC.closePath() oGC.fill(); //小时刻度盘 oGC.save() oGC.lineWidth="3"; oGC.beginPath() for(var i=0;i<12;i++){ oGC.moveTo(x,y) oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false) } oGC.closePath() oGC.stroke() oGC.fillStyle="white"; oGC.beginPath() oGC.moveTo(x,y) oGC.arc(x,y,r*13/15,0,360*Math.PI/180,false) oGC.closePath() oGC.fill(); oGC.restore() //时针 oGC.save() oGC.lineWidth="5" oGC.beginPath() oGC.moveTo(x,y) oGC.arc(x,y,r*3/5,oHoursValue,oHoursValue,false) oGC.closePath() oGC.stroke(); oGC.restore() //分针 oGC.save() oGC.lineWidth="3" oGC.beginPath() oGC.moveTo(x,y) oGC.arc(x,y,r*11/15,oMinValue,oMinValue,false) oGC.closePath() oGC.stroke(); oGC.restore() //秒针 oGC.save() oGC.lineWidth="1" oGC.beginPath() oGC.moveTo(x,y) oGC.arc(x,y,r*13/15,oSenValue,oSenValue,false) oGC.closePath() oGC.stroke(); oGC.restore() } setInterval(draw,1000) draw() }