1.canvas标签
参考资料
HTML5 Canvas(菜鸟教程)
canvas——文本
<canvas id="myCanvas" width="600" height="130" style="border:2px solid purple;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle='red';
ctx.font="30px 幼圆";
ctx.fillText("世界",20,40);
</script>
注: ctx.fillStyle=‘red’;不能加在fillText后面,不能显示。
canvas——文字渐变
<canvas id="myCanvas" width="400" height="100" style="border:2px solid yellow;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"purple");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.font="50px 宋体";
ctx.fillText("世界",20,60);
</script>
canvas——图片
<body>
<p>Image to use:</p>
<img id="scream" src="xx/xx.jpg" alt="The Scream" width="216" height="108"><p>Canvas:</p>
<canvas id="myCanvas" width="1080" height="540" style="border:2px solid yellow;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function() {
ctx.drawImage(img,10,10);
}
</script>
</body>