canvas-文本渐变图像
Posted 自学web网页前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas-文本渐变图像相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<img id="scream" alt="###" width="220" height="277">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
/*canvas-文本*/
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
/*文本字体*/
ctx.font="30px Arial";
/*文本内容 strokeText表示文字为空心，fillText表示文字为填充*/
ctx.strokeText("Hello World",10,50);
/*
创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");grd.addColorStop(1,"white"); 填充渐变
ctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
*/
/*一幅图像放置到画布上
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
*/
</script>
</body>
</html>
/*canvas属性和方法请参考w3c中HTML5文各种档*/
以上是关于canvas-文本渐变图像的主要内容，如果未能解决你的问题，请参考以下文章