搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 自学web网页前端 > canvas-文本、渐变、图像

canvas-文本、渐变、图像

自学web网页前端 2017-11-28

<!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-文本、渐变、图像》的版权归原作者「自学web网页前端」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注自学web网页前端微信公众号

自学web网页前端微信公众号:gh_3ac0bac7fceb

自学web网页前端

手机扫描上方二维码即可关注自学web网页前端微信公众号

自学web网页前端最新文章

精品公众号随机推荐