<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
#MyCanvas {
border: 1px solid #f60;
}
</style>
<body>
<!--创建一个canvas标签并设置大小-->
<canvas id="MyCanvas" height="600" width="500"></canvas>
</body>
<script type="text/javascript">
//创建图像
var img = new Image();
img.src = ‘img/0.png‘;
window.onload = function() {
var MyCanvas = document.getElementById(‘MyCanvas‘);
//getContext() 方法返回一个用于在画布上绘图的环境,2d为二维绘图
var ctx = MyCanvas.getContext(‘2d‘);
//开始绘制
ctx.beginPath();
//设置填充图像,定位点X Y,宽高
ctx.rect(50, 50, 100, 100);
//设置样式
ctx.fillStyle = "red";
ctx.fill();
//图像阴影：1.阴影颜色2.X Y 为阴影方向3.模糊程度
ctx.shadowColor = "#FF6600";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
//设置边框
ctx.strokeStyle = ‘lightblue‘;
ctx.stroke();
//开始一条路径,或重置当前路径
ctx.beginPath();
//图像位置移动
ctx.moveTo(500, 150);
//绘制路径
ctx.lineTo(300, 100);
ctx.lineTo(300, 200);
ctx.lineTo(300, 200);
ctx.lineTo(300, 200);
ctx.fillStyle = ‘lightcoral‘;
ctx.fill();
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(300, 100);
ctx.lineTo(300, 200);
ctx.lineTo(300, 200);
ctx.lineTo(300, 200);
ctx.fillStyle = ‘lightcoral‘;
ctx.fill();
ctx.beginPath();
ctx.moveTo(400, 50);
ctx.lineTo(300, 100);
ctx.lineTo(300, 200);
ctx.lineTo(300, 200);
ctx.lineTo(300, 200);
ctx.fillStyle = ‘lightgreen‘;
ctx.fill();
ctx.beginPath();
ctx.moveTo(100, 250);
ctx.lineTo(50, 300);
ctx.lineTo(150, 300);
//克隆一条边框
ctx.closePath();
//边框大小
ctx.lineWidth = 10;
ctx.stroke();
ctx.strokeStyle = ‘lightskyblue‘;
ctx.beginPath();
//中心点X Y,半径r,起始弧度,结束弧度,true/false为半圆方向
//去掉‘2*‘为半圆
ctx.arc(250, 250, 50, 0, 2 * Math.PI);
ctx.fill();;
//放置文字
ctx.beginPath();
ctx.font = ‘30px 微软雅黑‘;
ctx.fillText("Hello Canvsas", 50, 350);
//文字描边
ctx.beginPath();
ctx.lineWidth = 3;
ctx.strokeText("Hello Canvsas", 50, 350);
//放置图片
ctx.beginPath();
ctx.drawImage(img, 50, 400, 150, 150);
}
</script>
</html>
原文：https://www.cnblogs.com/laiquanfeng/p/13704869.html