<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="520px" height="1314px">
</canvas>
<script type="text/javascript">
var myCanvas = document.getElementById("mycanvas");
var ctx = myCanvas.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,100,100);
ctx.beginPath();//起始一条路径，或重置当前路径
ctx.moveTo(20,20);//把路径移动到画布中的制定点，不创建线条
ctx.lineTo(200,200);//添加一个新点，然后在画布中创建从该点到指定点的线条
ctx.lineTo(400,20);
ctx.closePath();//创建从当前点到起点的路径
ctx.lineWidth=2.0;
ctx.strokeStyle="#CC0000";
ctx.stroke();//绘制已定义的路径
ctx.strokeRect(10,10,100,200);//strokeRec绘制矩形函数
ctx.fillRect(10,10,100,200);//绘制填充矩形
ctx.clearRect(20,20,50,50);//清空矩形内制定像素
ctx.fillText("Hello Syl!",10,50);//绘制实心文本
ctx.strokeText("Hello Syl!", 100, 50);//绘制空心文本
var image=new Image();
image.src="1.jpg";
image.onload=function(){
for (var i=0;i<5;i++){
ctx.drawImage(image,100+i*80,100+i*80);
}
};
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" width="520px" height="1314px">
</canvas>
<script type="text/javascript">
var myCanvas = document.getElementById("mycanvas");
var ctx = myCanvas.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,100,100);
ctx.beginPath();//起始一条路径，或重置当前路径
ctx.moveTo(20,20);//把路径移动到画布中的制定点，不创建线条
ctx.lineTo(200,200);//添加一个新点，然后在画布中创建从该点到指定点的线条
ctx.lineTo(400,20);
ctx.closePath();//创建从当前点到起点的路径
ctx.lineWidth=2.0;
ctx.strokeStyle="#CC0000";
ctx.stroke();//绘制已定义的路径
ctx.strokeRect(10,10,100,200);//strokeRec绘制矩形函数
ctx.fillRect(10,10,100,200);//绘制填充矩形
ctx.clearRect(20,20,50,50);//清空矩形内制定像素
ctx.fillText("Hello Syl!",10,50);//绘制实心文本
ctx.strokeText("Hello Syl!", 100, 50);//绘制空心文本
var image=new Image();
image.src="1.jpg";
image.onload=function(){
for (var i=0;i<5;i++){
ctx.drawImage(image,100+i*80,100+i*80);
}
};
</script>
</body>
</html>
</body>
</html>