坐标系
<body>
<!-- 显示文字说明浏览器不支持 -->
<canvas id="theCanvas" class="canvas" width="100" height="100">你的浏览器不支持canvas</canvas>
<!-- 默认宽高300*150 -->
<script type="text/javascript">
var canvas = document.getElementById('theCanvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
</script>
</body>
css中的宽高不是画布的大小,当设置了css宽高,画布会随之缩放
如果你的canvas的宽高是100,100,而css样式宽高是200,200,那么你的画布的大小会被放大成200,200,里面的内容也会随之缩放
画线
var canvas = document.getElementById('theCanvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(100,200);
ctx.stroke();
如果不设置beginpath,将会将之前重新再画一遍
<script type="text/javascript">
var canvas = document.getElementById('theCanvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(100,200);
ctx.strokeStyle = "#000";
ctx.stroke();
ctx.beginPath(); //重新开始记入到内存中
ctx.moveTo(100,0);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.strokeStyle = "#0F0";
ctx.stroke();
</script>
画圆
ctx.beginPath();
ctx.arc(300,300,50,0,Math.PI,true); //x,y,r,弧度,true为逆时针,fasle顺时针
ctx.strokeStyle = "#000";
ctx.closePath(); //闭合
ctx.stroke();
矩形
ctx.strokeRect(300,100,200,100) //左上角坐标,宽,高
填充和描边
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(200,100);
ctx.fill() //闭合后填充
var canvas = document.getElementById('theCanvas');
var ctx = canvas.getContext('2d');
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(200,100);
ctx.closePath();
ctx.lineWidth = 10 //线宽度
ctx.strokeStyle = "#F00"; //描边样式
ctx.stroke();
ctx.fillStyle = "rgba(0,255,0,1)" //填充样式
ctx.fill() //闭合后填充
图形变换
平移
ctx.translate(0,100); //平移 x,y
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();
旋转
ctx.rotate(Math.PI/4);
ctx.lineWidth = 5;
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();
缩放
ctx.scale(1,0.5);
save和restore方法
save()相当于保存了一份环境.restore()作为恢复的作用.是成对出现的
渐变
var canvas = document.getElementById('theCanvas');
var ctx = canvas.getContext('2d');
var linearGradient = ctx.createLinearGradient(50,50,150,150); //起始坐标,终点坐标
linearGradient.addColorStop(0,'rgb(255,0,0)');
linearGradient.addColorStop(1,'rgb(0,0,255)');
ctx.fillStyle = linearGradient;
ctx.fillRect(0,0,200,200)
径向渐变
var rg = ctx.createRadialGradient(400,150,0,400,150,100); //起始坐标,起点半径,终点坐标,终点半径
rg.addColorStop(0,'rgb(255,0,0)');
rg.addColorStop(1,'rgb(0,0,255)');
ctx.fillStyle = rg;
ctx.beginPath();
ctx.arc(400,150,100,0,Math.PI*2,true);
ctx.fill();
文字
var str = "hello world";
ctx.font = "50px sans-serif"; //字体
ctx.textAlign = "center"; //水平对齐 这个居中是相对于这个文字的中间位置
ctx.textBaseLine = "top" //垂直对齐 top middle bottom 也是相对于文字的位置
ctx.fillText(str,300,100); //内容,位置 填充
ctx.strokeText(str,0,300); //内容,位置 描边
var width = ctx.measureText(str).width; //得到文字的宽度
console.log(width);
图像
ctx.fillRect(0,0,canvas.width,canvas.height);
var img = new Image();
img.src = "logo.png";
//一定要在图像加载完成后的回调中绘制图像
img.onload = function(){
//ctx.drawImage(img,0,0); //图像 位置
ctx.drawImage(img,0,0,256,80); //图像 位置 大小
ctx.drawImage(img,0,0,256,80,0,0,40,40); //获取Img图像(0,0)点出的40*40区域,绘制(100,100)点处,缩放成80*80
}
图形画刷
ctx.fillRect(0,0,canvas.width,canvas.height);
var img = new Image();
img.src = "logo.png";
//一定要在图像加载完成后的回调中绘制图像
img.onload = function(){
var pattern = ctx.createPttern(img,"repeat"); //no-repeat repeat-x repeat-y repeat
ctx.fillStyle = pattern;
ctx.fillRect(0,0,canvas.width,canvas.height);
}
网友评论