怎么用canvas 绘制文字动画绘制彩色文字

来源：蜘蛛抓取(WebSpider) 时间：2017-02-25 08:37 标签： wpf canvas绘制文字
HTML5新标签canvas来绘制文本文字
HTML5新标签canvas来绘制文本文字Shadows API 。API 的属性为：shadowColor：阴影颜色。其值和 CSS 颜色值一致。shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。shadowOffsetX 和 shadowOffsetY：阴影的 x 和 y 偏移量下面是HTML5代码部分context.shadowOffsetX = 5; context.shadowOffsetY = 5;&&context.shadowBlur& & = 4;&&context.shadowColor& &= ‘rgba(255, 0, 0, 0.5)’; context.fillStyle& &&&= ‘#00f’;&&context.fillRect(20, 20, 150, 100); 下载再来看用canvas来直接绘制文字context对象可以设置以下 text 属性：font：文字字体，同 CSSfont-family 属性textAlign：文字水平对齐方式。可取属性值: start, end, left,right, center。默认值:start.textBaseline：文字竖直对齐方式。可取属性值：top, hanging, middle,alphabetic, ideographic, bottom。默认值：alphabetic有两个方法可以绘制文字： fillText和 strokeText。第一个绘制带 fillStyle 填充的文字，后者绘制只有 strokeStyle 边框的文字。两者的参数相同：要绘制的文字和文字的位置(x,y) 坐标。context.fillStyle& & = ‘#00f’;&&context.font&&= ‘italic 30px sans-serif’;&&context.textBaseline = ‘top’;context.fillText&&(‘Hello world!’, 0, 0); context.font&&= ‘bold 30px sans-serif’; context.strokeText(‘Hello world!’, 0, 50); 转载零零H5原文地址
4 总笔记数
2399 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：Canvas还有一个好的功能就是将文字书写出来，看实例
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Canvas&/title&
&style type="text/css"&
body{margin:20px auto; padding:0; width:<span style="background-color: #f5f5f5; color: #px; }
canvas{border:dashed 2px #CCC}
&script type="text/javascript"&
function $$(id){
return document.getElementById(id);
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.font = 'bold 144px consolas';
cans.textAlign = 'left';
cans.textBaseline = 'top';
cans.strokeStyle = '#DF5326';
cans.strokeText('Hello', 100, 100);
cans.font = 'bold 144px arial';
cans.fillStyle = 'red';
cans.fillText('World', 300,300);
function img_click(){
var can = $$('can');
var cans = can.getContext('2d');
cans.clearRect(0,0,800,600);
&body onload="pageLoad();"&
&canvas id="can" width="800px" height="600px" onclick="img_click(this);"&&/canvas&
阅读(...) 评论()> html5 canvas 画一个矩形，在矩形里添加文字。 文字颜色与矩形背景颜色有关问题？
html5 canvas 画一个矩形，在矩形里添加文字。 文字颜色与矩形背景颜色有关问题？
taozhilian2006 & &
发布时间： & &
浏览：2 & &
回复：1 & &
悬赏：0.0希赛币
html5 canvas 画一个矩形，在矩形里添加文字。 文字颜色与矩形背景颜色问题？？html5 canvas 画一个矩形，在矩形里添加文字。 文字颜色与矩形背景颜色问题。　　JScript code　　
var c=this.callout[0];
var cxt=c.getContext(&2d&);
cxt.beginPath();
cxt.moveTo(x0,y0);
cxt.lineTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.lineTo(x3,y3);
cxt.lineTo(x4,y4);
cxt.closePath();
cxt.fillStyle=&#000000&;
cxt.fillText(&hello world&, x,y);
cxt.fill();
cxt.stroke();
这样子只有背景色而文字颜色显示不了？？怎样设置矩形背景色和文字颜色？？？
fillStyle strokeStyle 可以采用不同的颜色例子　　HTML code　　&!DOCTYPE html&
&title&Canvas beginePath example&/title&
function beginDemo() {
var canvas = document.getElementById(&demo&)
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.lineWidth = &3&;
ctx.strokeStyle = &blue&;
ctx.fillStyle = &orange&;
ctx.moveTo(100, 100);
ctx.lineTo(100, 400);
ctx.lineTo(400, 400);
ctx.lineTo(400, 100);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.font = &32pt Arial&;
ctx.strokeText(&我是中文字&, 120, 200);
ctx.strokeStyle = &red&;
ctx.stroke();
&body onload=&beginDemo();&&
&canvas id=&demo& width=&800& height=&800&$>$/canvas&
&/html&taozi520 & &
09:18:05 & &
& & （3）（0）
本问题标题：
本问题地址：
温馨提示：本问题已经关闭，不能解答。
暂无合适的专家
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&

我要回帖

更多关于 wpf canvas绘制文字 的文章

 

随机推荐