canvas 是一个二维网格
获取canvas var c = document.getElementById('myCanvas');
创建2d空间 var ctx = c.getContext('2d');
设置颜色 ctx.fillStyle = "#000";
定义矩形的填充方式 ctx.fillRect(x,y,width,height);
canvas 路径
moveTo(x,y) 定义线的开始坐标
lineTo(x,y) 定义线的结束坐标
完成后用 ctx.stroke()结束
在canvas中绘制圆形 arc(x,y,r,start,stop);
ctx.beginPath();
ctx.arc(60,60,30,0,2*Math.PI); // Math.PI代表180度,画圆的方向是顺时针
ctx.stoke();
用canvas绘制文本(实心/空心)
定义字体 font= “30px Arial”;i
实心文本 fillText("hello",20,60);
空心文本 strokeText("hello",20,90);
canvas 渐变,必须使用两种或者两种以上的颜色
createLinearGradient(x,y,x1,y1) // 创建线条渐变
createLinearGradient(x,y,r,x1,y1,r1) // 创建一个颈项/圆渐变
addColorStop() // 方法指定颜色停止,参数使用坐标来描述0至1;
canvas画图
drawImage(获取图片,x,y);
代码如下:
<!DOCTYPE HTML>
<html>
<body>
<img src="img\timg (1).jpg" width="280" height="150">
<canvas id="myCanvas" width="370" height="250" style="border: 1px solid #ccc;"></canvas>
<script>
// 画直线 moveTo() lineTo() stroke();
// var c = document.getElementById('myCanvas');
// var ctx = c.getContext("2d");
// ctx.moveTo(10,10);
// ctx.lineTo(47,78);
// ctx.stroke();
// 画圆
// var c = document.getElementById('myCanvas');
// var ctx = c.getContext('2d');
// ctx.beginPath();
// ctx.arc(60,60,30,0,2*Math.PI);
// ctx.stroke();
// 实心或者空心的文字
// var c = document.getElementById('myCanvas');
// var ctx = c.getContext('2d');
// ctx.font = "30px Arial";
// ctx.strokeText("hello",30,30); // 空心
// ctx.fillText("hello",30,60); // 实心
// 线性渐变
// var c = document.getElementById('myCanvas');
// var ctx = c.getContext('2d');
// // 创建渐变
// var grd = ctx.createLinearGradient(0,0,200,0);
// grd.addColorStop(0,'red');
// grd.addColorStop(1,'white');
// // 填充渐变
// ctx.fillStyle = grd;
// ctx.fillRect(10,10,150,80);
// 颈项 圆渐变
// var c = document.getElementById('myCanvas');
// var ctx = c.getContext('2d');
// var grd = ctx.createLinearGradient(80,60,5,90,20,50);
// grd.addColorStop(0,"red");
// grd.addColorStop(1,"white");
// ctx.fillStyle = grd;
// ctx.fillRect(10,10,180,120);
// canvas 图像
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var oImg = document.getElementsByTagName('img')[0];
oImg.onload = function(){
ctx.drawImage(oImg,10,10);
}
</script>
</body>
</html>