//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()
}