canvas绘制文字

最新推荐文章于 2022-11-23 16:03:55 发布

hb707934728

最新推荐文章于 2022-11-23 16:03:55 发布

阅读量704

点赞数

分类专栏： Html5_学习笔记

本文链接：https://blog.csdn.net/hb707934728/article/details/66972853

版权

Html5_学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html>
   <head>
     <title>Canvas element size: 600 x 300, Canvas drawing surface size: 600 x 300</title>

      <style> 
         body {
            background: #dddddd;
         }

         #canvas {
            margin: 10px;
            padding: 10px;
            background: #ffffff;
            border: thin inset #aaaaaa;
         }
      </style>
   </head>

  <body>

		<!--默认canvas元素的大小是300x150个屏幕像素-->
    <canvas id='canvas' width='600' height='300'>
      Canvas not supported
    </canvas>

    <script>
	
			//获取指向canvas的引用
			var canvas=document.getElementById('canvas');
			//获取绘图环境变量
			context=canvas.getContext('2d')
				
			context.font='38pt Arial'
			context.fillStyle='cornflowerblue'
			context.strokeStyle='red'
				
			//根据fillStyle指定的属性绘制文本
			context.fillText("Hello Canvas",canvas.width/2-150,canvas.height/2+15);
			//根据strokeStyle指定的属性来描绘字符的轮郭线
			context.strokeText("Hello Canvas",canvas.width/2-150,canvas.height/2+15);
			
		
		</script>
  </body>
</html>

演示地址:http://sandbox.runjs.cn/show/jbqga2x9

hb707934728

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制文字

Canvas element size: 600 x 300, Canvas drawing surface size: 600 x 300 body { background: #dddddd; } #canvas { margin: 10px; pa
复制链接

扫一扫

专栏目录