登录 注册
您的位置:首页> 建站知识 > vi设计
【手机网站建设的公司】掌握绘制填充文字和轮廓文字的方法
标签:vi设计
发表日期:2018-11-12 07:06:14     文章编辑:admin     浏览次数:88

 【手机网站建设的公司】

cxt.stroke();
</script>
</body>
//绘制当前路径的边框
    </html>
【案例说明】本例中使用fill()方法绘制填充的圆弧和圆。如果只是绘制圆弧的轮廓而不填则使用stroke()方法完成绘制。
4.绘制文字
(1)绘制填充文字
fillText()方法用于填充方式绘制字符串,语法格式为:
    fdIText(text,x,y,[maxWidth])
其中的参数含义如下。
text:绘制文字的内容。
x,y:绘制文字的起点坐标。
maxWidth:可选参数,显示文字的最大宽度,可以防止溢出。
(2)绘制轮廓文字
strokeText()方法用于轮廓方式绘制字符串,语法格式为:
    strokeText(text,x,y,[maxWidthl)
该方法参数部分的解释与fillText()方法相同。
fillText()方法和strokeText()方法的文字属性设置如下。
font:字体。
textAlign:水平对齐方式。
textBaseline:垂直对齐方式。
【案例5-12】绘制填充文字和轮廓文字。
【案例展示】本例文件5-12.html在浏览器中的显示效果如图5-13所示。
【学习目标】掌握绘制填充文字和轮廓文字的方法。
【知识要点】掌握绘制文字的相关方法和属性。
代码如下:
    <! doctype html>
    <html>
    <head>
    <meta charset="gb2312">
    <title>绘制文字</title>
    </head>
图5-13页面的显示效果
<body>
 <canvas id="myCanvas" width="200" height="100" style="border:lpx solid #c3c3c3;">
 您的浏览器不支持canvas元素.
 </canvas>
 <script type="text/j avascript'>
    var c=document.getElementById("myCanvas")
   var cxt=c.getContext("2d");(公司网站建设
留言预约
关于我们
易神州网络-专业的软件开发和品牌营销公司,提供互联网基础服务与数字营销产品解决方案专家,14年丰富的软件开发、品牌策划营销。擅长于系统化解决企业品牌在互联网上的统一性传播,企业品牌在互联网上的应用。我们协助您通过在线品牌的塑造,建立长久的企业品牌价值。
联系我们
400-611-0508
周一至周六9:00-18:00
全方位的营销咨询   精准的解决方案
地址:北京市丰台科技园汉威国际四区8号楼7层
关注公众号