canvas学习绘制文字

1.文字的绘制方法

strokeText("文字",x,y,maxWith) 绘制（描边）空心文字

fillText("文字",x,y,maxWith) 绘制实心

字体样式 font(大小字体 ...)

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        canvas{background:#A9A9A0;}    </style></head><body>    <canvas id="bcanvas" width="800" height="800">        您的浏览器暂不支持HTML5的canvas元素    </canvas>    <script type="text/javascript">        var canvas=document.getElementById(‘bcanvas‘);        var pi=canvas.getContext(‘2d‘);        pi.lineWidth=2;        pi.strokeStyle="yellow";        pi.fillStyle="orange";        pi.moveTo(400,500);        pi.arc(400,500,300,Math.PI*7/6,Math.PI*11/6,false);        pi.closePath();        pi.fill();        pi.beginPath();        pi.strokeStyle="orange";        pi.fillStyle="#A9A9A0";        pi.moveTo(400,500);        pi.arc(400,500,150,Math.PI*7/6,Math.PI*11/6,false);        pi.closePath();        pi.fill();        pi.beginPath();        pi.lineWidth=1;        pi.strokeStyle="green";        pi.fillStyle="red";        pi.font="60px 隶书";        pi.strokeText("纵",375,270);        pi.fillText("横",375,340);        pi.strokeText("横",375,340);        pi.font="60px 仿宋"        pi.strokeText("横",375,410);    </script></body></html>

时间： 2024-10-13 08:04:53

canvas学习绘制文字的相关文章

[HTML5 Canvas学习]绘制矩形

1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形代码: <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); context.lineJoin = 'round'; context.lineWidth = 20; context.strokeRect(10, 10,

[Canvas学习]绘制图形

学习目的:在Canvas上绘制矩形,三角形,直线,圆弧,曲线栅格栅格canvas grid,canvas元素默认被网格覆盖,栅格的起点是左上角坐标(0,0),元素的位置都是相对于栅格起点来定位的. 绘制矩形 API提供了三种方法绘制矩形 fillRect(x, y, width, height) 绘制填充的矩形 strokeRect(x, y, width, height) 绘制矩形边框 clearRect(x, y, width, height) 清除指定矩形区域变的完全透明 rect(x

Python之pygame学习绘制文字制作滚动文字

pygame绘制文字 ? 今天来学习绘制文本内容,毕竟游戏中还是需要文字对玩家提示一些有用的信息. 字体常用的不是很多,在pygame中大多用于提示文字,或者记录分数等事件. 字体绘制基本分为以下几个步骤: 初始化字体模块 pygame.init() 创建一个字体对象可以从文件或者系统内字体选取 pygame.font.SysFont('幼圆',50) 绘制文本对象. a.render("测试字体",True,(255,0,0),(0,0,0)) 屏幕绘制字体 screen.blit

canvas学习绘制渐变色

1.createLinearGradient() 创建线性渐变 //Linear adj. 直线的线性的 //Gradient n. 梯度变化率 createLinearGradient(x1,y1,x2,y2)--颜色渐变的起始坐标和终点坐标 addColorStop(位置,"颜色值")--0表示起点...插入点...1表示终点,配置颜色停止点 <!DOCTYPE html><html lang="en"><head> &l

使用canvas与Paint在View中居中绘制文字

本博客只要没有注明"转",那么均为原创,转贴请注明本博客链接链接我们在自定义View中有的时候会想自己绘制文字,自己绘制文字的时候,我们通常希望把文字精确定位,文字居中(水平.垂直)是普遍的需求,所以这里就以文字居中为例,看一下android中的文字应该如何绘制,它与Java又有什么区别. 先来看看我们的目标,见下图上图是我打开了"显示布局边界"后截的图,所有会有好多框框. 仔细观察上图文字区域,我们会发现文字区域中有5条颜色不同的线.按着从上到下的顺序,他们的

HTML之canvas 8 绘制阴影-绘制文字

绘制阴影 Context.shadowOffetX:阴影横向位移量 Context.shadowOffetY:阴影纵向位移量 Context.shadowColor:阴影颜色 Context.shadowBlur阴影的模糊范围绘制文字 Context.fillStyle=’#00F’; Context.font=”bold 30px sans-serif”; Context.fillText(“hello world”,0,0); Context.strokeText(“hello world

canvas学习总结三：绘制虚线

上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setLineDash(); 下面我们就来看看虚线的绘制方法语法 ctx.setLineDash(segments); 参数 segments: 一个Array数组. 一组描述交替绘制线段和间距(坐标空间单位)长度的数字. 如果数组元素的数量是奇数, 数组的元素会被复制并重复.例如, [5, 15, 25

用TextPaint来绘制文字

TextPaint是paint的子类,用它可以很方便的进行文字的绘制,一般情况下遇到绘制文字的需求时,我们一般用TextPaint所提供的方法.开始学习如何绘制文字之前,我们必须要先了解下android中文字是怎么绘制到屏幕上的,文字的格式又是怎么样的. 一.FontMetrics 1.1 理论知识它是一个Paint的内部类,作用是“字体测量”.它里面呢就定义了top,ascent,descent,bottom,leading五个成员变量其他什么也没有,和rect很相似.如果你不信,我们可以去

html5 canvas 学习笔记（一）

一.canvas元素API canvas元素并未提供很多API,实际上他只提供了两个属性与三个方法: 1.canvas元素属性 width 属性:与 height 属性: canvas元素绘图表面的宽度,在默认状况下,浏览器会将canvas元素大小设定成与绘图表面大小一致,然而如果在css中覆写了元素大小,那么浏览器则会将绘图表面进行缩放,使之符合元素尺寸.其值为非负整数,默认值为300. 2.canvas元素方法 getContext()方法: 返回与该canvas元素相关的绘图环境对象,每个