canvas绘图是位图,矢量图是SVG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
text-align:center;
}
canvas{
background-color:#efefef;
}
</style>
</head>
<body>
<!--必须设置宽高属性-->
<canvas id="c6" height="500" width="500">您的浏览器不支持</canvas>
<canvas id="c1" height="500" width="500">您的浏览器不支持</canvas>
<canvas id="c2" height="500" width="500">您的浏览器不支持</canvas>
<canvas id="c3" height="500" width="500">您的浏览器不支持</canvas>
<canvas id="c4" height="500" width="500">您的浏览器不支持</canvas>
<canvas id="c5" height="500" width="500">您的浏览器不支持</canvas>
<canvas id="c7" height="500" width="500">您的浏览器不支持</canvas>
<canvas id="c8" height="500" width="500">您的浏览器不支持</canvas>
<script type="text/javascript">
/**
鼠标事件
offsetX 和offsetY相对于源事件
clientX 和clientY相对于浏览器
screenX 和screenY相对于显示器
绘图的方法和函数
fillStyle : "#fff"; //填充颜色
font : "10px SimHei" //字体
globalAlpha : 1 //全局透明度
imageSmoothingEnabled: true //启用图片平滑
lineCap : "butt" //线条头部
lineJoin : "miter" //线条连接处
lineWidth : 1 //线条宽度
shadowBlur : 0 //阴影半径
shadowColor: "rgba(0, 0, 0, 0)" //阴影颜色
shadowOffsetX : 0 //阴影X轴偏移量
shadowOffsetY : 0 //阴影Y轴偏移量
strokeStyle : "#000000" //轮廓/描边样式
textAlign : "start" //文本对齐方式
textBaseline : "alphabetic" //文本基线
arc() //拱形
arcTo() //拱形到
beginPath() //开始一条路径
bezierCurveTo() //绘制贝塞尔曲线
clearRect() //清除矩形范围
clip() //裁切
closePath() //闭合路径
createLinearGradient() //创建线性渐变色
createRadialGradient() //创建径向渐变色
drawImage() //绘制图像
ellipse() //绘制椭圆
fill() //填充路径
fillRect() //填充矩形
fillText() //填充文本
lineTo() //到指定点绘制一条直线
measureText() //测量文本的宽度
moveTo() //移动到指定点
rect() //绘制矩形路径
resetTransform() //重置变形
restore() //恢复
rotate() //旋转
save() //保存
scale() //缩放
stroke() //勾勒轮廓/描边
strokeRect() //描边矩形区域
strokeText() //对文本进行文本
transform() //变形
translate() //平移
**/
/*****绘制矩形*****/
var ctx6 = c6.getContext("2d"); //绘制画布上的画笔 一般用2d
ctx6.strokeRect(0,0,100,100); //绘制矩形描边 x轴位置 y轴位置 矩形宽和高
ctx6.fillStyle = "#0f0"; //绘制填充样式
ctx6.fillRect(0,0,100,100); //填充颜色 x轴位置 y轴位置 矩形宽和高
//居中矩形
ctx6.fillRect(200,200,100,100);
//清除画布的所有内容
//ctx6.clearRect(0,0,500,500);
//清除画布某个内容
ctx6.clearRect(225,225,50,50);
/******绘制文字******/
var ctx = c1.getContext('2d');
ctx.fillStyle = "#0f0";
ctx.fillRect(100,215,300,25);
//设置字体
ctx.fillStyle = "#00f"; //设置字体颜色
ctx.font = "20px SimHei" //设置文字大小和字体样式
ctx.textBaseline = "alphabetic"; //设置文本基线 alphabetic默认
var text = "文字gjt";
ctx.strokeText(text,100,240); //文本描边
ctx.textBaseline = "bottom"; //设置文本基线 bottom基线上面
var text = "文字gjt";
ctx.fillText(text,170,240); //文本填充
ctx.textBaseline = "top"; //设置文本基线 top基线下面
ctx.strokeStyle = "#00f";
var text = "文字gjt";
ctx.strokeText(text,240,240);
ctx.textBaseline = "middle"; //设置文本基线 middle基线中间
var text = "文字gjt";
var w = ctx.measureText(text).width; //获得文字宽度
var g = ctx.createLinearGradient(310,240,310+w,260); //线性渐变 x轴起始位置 y轴起始位置 x轴到哪个位置结束 y轴到哪个位置结束 createRadialGradient(x1,y1,r1,x2,y2,r2):径向渐变 前三个分别为起始圆的位置坐标和半径,后三个为终止圆的坐标和半径
g.addColorStop(0,'red'); //偏移量和颜色值
g.addColorStop(1/7,'orange');
g.addColorStop(2/7,'yellow');
g.addColorStop(3/7,'green');
g.addColorStop(4/7,'blue');
g.addColorStop(5/7,'indigo');
g.addColorStop(6/7,'purple');
g.addColorStop(1,'red');
ctx.fillStyle = g;
ctx.fillText(text,310,240); //文本填充
/*****绘制路径*****/
var ctx2 = c2.getContext('2d');
ctx2.moveTo(50,50); //开始路径 x轴 y轴
ctx2.lineTo(170,170); //从上一个点到指定点画一条直线
ctx2.lineTo(50,270);
ctx2.strokeStyle = '#00f';
ctx2.closePath(); //闭合路径
ctx2.stroke(); //使用当前路径描边
ctx2.beginPath(); //开始一条新路径
ctx2.moveTo(200,50);
ctx2.lineTo(320,170);
ctx2.lineTo(200,270);
ctx2.fillStyle = "#0f0";
ctx2.fill(); //使用当前路劲填充
/*****绘制圆形*****/
var ctx3 = c3.getContext('2d');
ctx3.arc(50,50,50,Math.PI,2*Math.PI); //x轴起始位置 y轴起始位置 半径 起始弧度 结束弧度 弧度算法:deg*Math.PI/180
ctx3.stroke();
ctx3.beginPath();
ctx3.arc(450,50,50,0,Math.PI);
ctx3.fillStyle = "#0f0";
ctx3.fill();
ctx3.beginPath();
ctx3.arc(0,450,50,270*Math.PI/180,90*Math.PI/180);
ctx3.strokeStyle = "#0f0";
ctx3.stroke();
ctx3.beginPath();
ctx3.arc(500,450,50,90*Math.PI/180,270*Math.PI/180);
ctx3.fillStyle = "rgba(255,0,255,.5)";
ctx3.fill();
ctx3.beginPath();
ctx3.arc(250,250,50,0,2*Math.PI);
var g = ctx3.createRadialGradient(250,250,10,250,250,50); //前三个分别为起始圆的位置坐标和半径,后三个为终止圆的坐标和半径
g.addColorStop(0,"#0f0");
g.addColorStop(0.5,"#00f");
g.addColorStop(1,"rgba(255,0,0,.6)");
ctx3.fillStyle = g;
ctx3.fill();
//圆形进度条
ctx3.beginPath();
ctx3.arc(250,250,100,0,2*Math.PI);
ctx3.lineWidth = 20; //线条宽度
ctx3.strokeStyle = '#888';
ctx3.stroke();
var deg = 0;
var time = setInterval(function() {
ctx3.beginPath();
deg += 5;
ctx3.arc(250,250,100,0,deg*Math.PI/180);
ctx3.lineWidth = 20;
ctx3.strokeStyle = "#0f0";
ctx3.stroke();
if (deg === 360) {
clearInterval(time);
}
},200);
//吃豆人
ctx3.beginPath();
ctx3.arc(200,50,50,45*Math.PI/180,315*Math.PI/180);
ctx3.lineWidth = 1;
ctx3.lineTo(200,50);
ctx3.closePath();
ctx3.stroke();
//眼睛
ctx3.beginPath();
ctx3.arc(200,20,10,0,2*Math.PI);
ctx3.lineWidth = 2;
ctx3.strokeStyle = "#000";
ctx3.stroke();
ctx3.fillStyle = "#00A2E8";
ctx3.fill();
//小眼睛
ctx3.beginPath();
ctx3.arc(205,18,3,0,2*Math.PI);
ctx3.fillStyle = "#fff";
ctx3.fill();
/*****绘制图像*****/
var ctx4 = c4.getContext('2d');
var img = new Image();
img.src = 'p1.png';
img.onload = function() { //必须等待图片加载完成
var w = img.width;
var h = img.height;
ctx4.drawImage(img,0,0); //把图片放到画布上 参数:图片 x轴位置 y轴位置
ctx4.drawImage(img,500-w,0);
ctx4.drawImage(img,0,500-h*2,100*2,81*2);
}
/*****图像跟随鼠标移动*****/
var ctx5 = c5.getContext('2d');
var img = new Image();
img.src = 'p1.png';
img.onload = function() {
ctx5.drawImage(img,250-img.width/2,250-img.height/2);
c5.onmousemove = function(e) {
var x = e.offsetX - img.width/2;
var y = e.offsetY - img.height/2;
ctx5.clearRect(0,0,500,500);
ctx5.drawImage(img,x,y);
}
}
/*****如何加载多张图片*****/
var progress = 0; //100表示加载完成
var ctx7 = c7.getContext('2d');
var img = new Image();
img.src = 'p1.png';
img.onload = function() {
progress += 50;
if (progress === 100) {
draw();
}
}
var img2 = new Image();
img2.src = 'p2.png';
img2.onload = function() {
progress += 50;
if (progress === 100) {
draw();
}
}
function draw() {
console.log('开始绘制图片');
}
</script>
</body>
</html>