canvas绘制字体-属性设置3

效果图

html结构

<!DOCTYPE html>

<html>

<head>

<title>canvas27</title>

</head>

<body>

当前浏览器不支持canvas,请更换浏览器后再试

</canvas>

</body>

</html>

js脚本

window.onload = function(){

var canvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 800;

context = canvas.getContext("2d");

context.fillStyle = "#058";

context.font = "xx-small sans-serif";

context.fillText("欢迎学习",40,100);

context.font = "x-small sans-serif";

context.fillText("欢迎学习",40,200);

context.font = "medium sans-serif";

context.fillText("欢迎学习",40,300);

context.font = "large sans-serif";

context.fillText("欢迎学习",40,400);

context.font = "x-large sans-serif";

context.fillText("欢迎学习",40,500);

context.font = "xx-large sans-serif";

context.fillText("欢迎学习",40,600);

}

</script>

时间： 2024-08-10 19:04:17

canvas绘制字体-属性设置3的相关文章

canvas绘制字体-属性设置1

效果图 html结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>canvas26</title> <link rel="stylesheet" href=

canvas绘制字体-属性设置2

效果图 html结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>canvas27</title> <link rel="stylesheet" href=

在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的怎么会模糊,先前也有考虑到适配不同尺寸的移动设备,担心直接使用 img 或者设置 background 会使图片拉伸而变得模糊,所以使用 canvas 来绘制转盘与九宫格,精确的计算每个物体所在的坐标以及尺寸绘制出来的,怎么会模糊. 然而将绘制的内容与页面中的其他文字或者图片作对比后,发现使用 ca

JAVA学习绘图颜色及其笔画属性设置字体显示文字

package com.graphics; import java.awt.*; import java.awt.geom.Rectangle2D; import java.util.Date; import javax.swing.*; /** * * @author biexiansheng * */ public class DrawString extends JFrame{ private Shape rect;//矩形对象 private Font font;//字体对象 priva

delphi 01设置字体属性

设置/获取字体属性名称大小粗体斜体下划线删除线颜色1 颜色2 uses MSHTML; //设置 //------------------------------------------------------------------------------procedure WB_SetFontName();begin (Form1.webbrowser1.Document as IHTMLDocument2).execCommand('FontName', False, F

canvas绘制清晰的方法

很早就开始使用canvas,包括自己绘制各种图形,以及作为画布提供给诸如echarts,当canvas绘制细线条,特别是关于文字绘制会出现很模糊或者锯齿的感觉. 1 <canvas ref="canvas" width="200" height="200"/> 正常情况下一般都是这么写的,但是实际上对于canvas来说,这个canvas.width canvas.height 与canvas.style.width canvas.st

canvas 绘制图形

什么是canvas? <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. 方法属性颜色.样式和阴影属性描述 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式. strokeStyle 设置或返回用于笔触的颜色.渐变或模式. shadowColor 设置或返回用于阴影的颜色. shadowBlur 设置或返回用于阴影的模糊级别. shadowOffsetX 设置或返回

HTML5 Canvas 学习笔记（canvas绘制线条、矩形、多边形、圆形、圆环、组合图形、文字、自定义图像）

学习资源:http://www.w3school.com.cn/html5/html_5_canvas.asp http://blog.csdn.net/clh604/article/details/8536059 http://www.jb51.net/html5/70307.html 一.对 canvas 的理解 <canvas>标签是 HTML5 中的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件. canvas 是用来在网页上绘制图形的(我们通常称之为画布),

canvas 绘制圆形进度条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas 圆形进度条效果</title> <style> *{margin:0;padding:0;} body{text-align:center;background-color:#000;} </style> </he