HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="trails" width="200" height="200" style="border:1px solid;">
对不起，您的浏览器不支持canvas
</canvas>
</body>
<script>
var canvas = document.getElementById('trails');
var context = canvas.getContext('2d');
context.save();
//变换
context.translate(10,10);
context.beginPath();
context.moveTo(30,30);
context.lineTo(90,90);
context.lineTo(40,90);
//线条宽度
context.lineWidth = 5;
//接合点样式
context.lineJoin = 'round';
//颜色
context.strokeStyle = '#663300';
//线条末端样式
context.lineCap = 'round';
//闭合路径
context.closePath();
//填充
context.fillStyle = '#339900';
context.fill();
context.fillStyle = '#CCC';
//填充矩形区域
context.fillRect(0,0,10,50);
//画出矩形区域边框
context.strokeRect(0,100,10,50);
//清楚矩形区域内容
context.clearRect(0,0,10,50);
//绘制曲线
context.moveTo(0,0);
context.quadraticCurveTo(10,110,100,120);
//插入图片
var pic = new Image();
pic.src = 'img/blue1.png';
pic.onload = function(){
context.drawImage(pic,0,0,40,40);
}
//背景图片
var gr = new Image();
gr.src='img/mapbg.jpg';
gr.onload = function(){
context.strokeStyle = context.createPattern(gr,'repeat');
context.fillRect(100,100,100,50);
}
//渐变
//var tG = context.createLinearGradient(100,10,50,50);
//放射性渐变
var tG = context.createRadialGradient(100,10,50,50,50,50);
tG.addColorStop(0,'rgba(0,0,0,0.1)');
tG.addColorStop(0.5,'#00ff00');
tG.addColorStop(1,'#0000ff');
context.fillStyle = tG;
context.fillRect(100,10,50,50);
//缩放
context.scale(2,2);
context.stroke();
//恢复context至原始状态，后续绘图不会受前面设置的属性影响
context.restore();
//文本
context.save();
//字号
context.font = '60px impact';
//对齐方式
context.textAlign = 'center';
//阴影
context.shadowColor = 'rgba(0,0,0,0.2)';
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;
context.shadowBlur = 2;
//缩放
context.scale(1,0.6);
//拉伸变换
context.transform(1,0,-0.5,1,0,0);
//文本填充色
context.fillStyle = '#996600';
context.fillText('Hello World!' ,100,100,100);
context.restore();
</script>
</html>
