您的当前位置:首页HTML5Canvas平移,放缩,旋转图文代码详情

HTML5Canvas平移,放缩,旋转图文代码详情

2023-11-26 来源:刁羽宠物网
HTML5 Canvas中提供了实现图形平移,旋转,放缩的API。

平移(translate)

平移坐标translate(x, y)意思是把(0,0)坐标平移到(x, y),原来的(0,0)坐标则变成(-x, -y)

图示如下:

任何原来的坐标点p(ox, oy)在translate之后的坐标点为p(ox-x, oy-y),其中点(x, y)为平移

点坐标translate(x, y)。

代码演示:

// translate is move the startpoint to centera and back to top left cornerfunction renderText(width, height, context) { context.translate(width/ 2, height / 2);// 中心点坐标为(0, 0) context.font="18px Arial"; context.fillStyle="blue"; context.fillText("Please Press <Esc> to Exit Game",5,50); context.translate(-width/2,-height/2); // 平移恢复(0,0)坐标为左上角 context.fillText("I'm Back to Top",5,50);}

放缩(Scale)

Scale(a, b)意思是将对象沿着XY轴分别放缩至a*x, b*y大小。效果如图示:

// translation the rectangle.function drawPath(context) { context.translate(200,200); context.scale(2,2);// Scale twice size of original shape context.strokeStyle= "green"; context.beginPath(); context.moveTo(0,40); context.lineTo(80,40); context.lineTo(40,80); context.closePath(); context.stroke();}

旋转(rotate)

旋转角度rotate(Math.PI/8)

旋转前的坐标p(x, y)在对应的旋转后的坐标P(rx, ry)为

Rx = x * cos(-angle)- y * sin(-angle);Ry = y * cos(-angle) + x * sin(-angle);

旋转90度可以简化为:

Rx = y;Ry = -x;

Canvas中旋转默认的方向为顺时针方向。演示代码如下:

// new point.x = x * cos(-angle) -y * sin(-angle),// new point.y = y * cos(-angle) +x * sin(-angle)function renderRotateText(context) { context.font="24px Arial"; context.fillStyle="red"; context.fillText("i'm here!!!",5,50); // rotate -90 degreee // context.rotate(-Math.PI/2); // context.fillStyle="blue"; // context.fillText("i'm here!!!", -400,30); // rotate 90 degreee context.rotate(Math.PI/2); context.fillStyle="blue"; context.fillText("i'm here!!!",350,-420); console.log(Math.sin(Math.PI/2)); // rotae 90 degree and draw 10 lines context.fillStyle="green"; for(var i=0; i<4; i++) { var x = (i+1)*20; var y = (i+1)*60; var newX = y; var newY =-x; context.fillRect(newX,newY, 200, 6); }}

通常做法是旋转与平移一起使用,先将坐标(0,0)平移到中心位置

translate (width/2, height/2)然后再使用rotate(Math.PI/2)完成旋转

代码示例如下:

function saveAndRestoreContext(context) { context.save(); context.translate(200,200); context.rotate(Math.PI/2); context.fillStyle="black"; context.fillText("2D Context Rotate And Translate", 10, 10); context.restore(); context.fillText("2D Context Rotate And Translate", 10, 10);}

全部JavaScript代码:

var tempContext = null; // global variable 2d contextwindow.onload = function() {var canvas = document.getElementById("target");canvas.width = 450;canvas.height = 450;if (!canvas.getContext) { console.log("Canvas not supported. Please install a HTML5 compatible browser."); return;}// get 2D context of canvas and draw imagetempContext = canvas.getContext("2d");// renderText(canvas.width, canvas.height, tempContext);saveAndRestoreContext(tempContext);// drawPath(tempContext);}// translate is move the start point to centera and back to top left cornerfunction renderText(width, height, context) {context.translate(width / 2, height / 2);context.font="18px Arial";context.fillStyle="blue";context.fillText("Please Press <Esc> to Exit Game",5,50);context.translate(-width / 2, -height / 2);context.fillText("I'm Back to Top",5,50);}// translation the rectangle.function drawPath(context) {context.translate(200, 200);context.scale(2,2); // Scale twice size of original shapecontext.strokeStyle = "green";context.beginPath();context.moveTo(0, 40);context.lineTo(80, 40);context.lineTo(40, 80);context.closePath();context.stroke();}// new point.x = x * cos(-angle) - y * sin(-angle), // new point.y = y * cos(-angle) + x * sin(-angle)function renderRotateText(context) {context.font="24px Arial";context.fillStyle="red";context.fillText("i'm here!!!",5,50);// rotate -90 degreee// context.rotate(-Math.PI/2);// context.fillStyle="blue";// context.fillText("i'm here!!!", -400,30);// rotate 90 degreeecontext.rotate(Math.PI/2);context.fillStyle="blue";context.fillText("i'm here!!!", 350,-420);console.log(Math.sin(Math.PI/2));// rotae 90 degree and draw 10 linescontext.fillStyle="green";for(var i=0; i<4; i++) {var x = (i+1)*20;var y = (i+1)*60;var newX = y;var newY = -x;context.fillRect(newX, newY, 200, 6);}}function saveAndRestoreContext(context) {context.save();context.translate(200,200);context.rotate(Math.PI/2);context.fillStyle="black";context.fillText("2D Context Rotate And Translate", 10, 10);context.restore();context.fillText("2D Context Rotate And Translate", 10, 10);}

小编还为您整理了以下内容,可能对您也有帮助:

在线绘制canvas导出代码-html5中canvas画的图形如何打印以及导出pdf?

HTML5如何通过canvas,把两张图片绘制到画布,然后导出大图

<img_rc="......."_d="img1"/>

<img_rc="......."_d="img2"/>

<img_d="img3"/>

var_mg1=("img1"),

__img2=("img2"),

__img3=("img3");

var_anvas=("canvas"),

__context=("2d");

=_+;

=(,);

//__img1_尤牖

(img1,0,0,,);

//__img2_尤牖

(img1,,0,,);

//_寄谌莸汲

var_rc=();

=_rc;

<p>drawImage_氖褂梅椒?梢匀フ饫锟匆幌</p>

<a_ref=""/>

canvas加入代码是什么

1.原生canvas实现用到的API

1)getContext(contextID)---返回一个用于在画布上绘图的环境

复制代码代码如下:('2d')//返回一个CanvasRenderingContext2D对象,使用它可以绘制到Canvas元素中

2)drawImage

drawImage(imgObj,x,y)//按原图大小绘制,x、y为图片在画布中的位置坐标drawImage(imgObj,x,y,width,height)//按指定宽高绘制drawImage(imgObj,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)//从原来图片上某一个位置开始(sourceX,sourceY),指定长宽进行剪切(sourceWidth,sourceHeight),然后将剪切的内容放到位置为(destX,destY),宽度为(destWidth),高度为(destHeight)的位置上

3)getImageData(x,y,width,height)---获取矩形区域的图像信息

(0,0,10,10)//获取左上角坐标为(0,0),宽高为区域内的图像信息//返回ImageData:{width:10,height:10,data:Uint8ClampedArray[400]}

4)beginPath()---开始一条路径,或重置当前的路径5)rect(x,y,width,height)---绘制矩形

6)lineWidth---设置或返回当前线条的宽度

7)fillStyle---设置或返回用于填充绘画的颜色、渐变或模式

=color|gradient|pattern

8)strokeStyle---设置或返回用于笔触的颜色、渐变或模式

9)globalAlpha---设置或返回绘图的当前透明值

10)fill()---填充当前的图像(路径)。默认颜色是黑色

【注】如果路径未关闭,那么fill()方法会从路径结束点到开始点之间添加一条线,以关闭该路径,然后填充该路径。

11)stroke()---会实际地绘制出通过moveTo()和lineTo()方法定义的路径。默认颜色是黑色

12)toDataURL(type,encoderOptions)---导出图片,type为图片类型,encoderOptions图片质量,[0,1]

("image/png",1)

2.

简化canvas编写的库,为canvas提供所缺少的对象模型

能做的事

1)在canvas上创建、填充图形(包括图片、文字、规则图形和复杂路径组成图形)

2)给图形填充渐变颜色

3)组合图形(包括组合图形、图形文字、图片等)

4)设置图形动画集用户交互

5)生成JSON,SVG数据等

3.使用实现用到的API

1)声明画布

letcanvas=new('canvas'){width:200,height:200}

插入图片

letimgInstance=new(imgElement,{left:0,top:0,width:100,height:100,angle:0}

3)设置背景图片setBackgroundImage

(imgInstance)

4)renderAll()重新绘制

5)on()用户交互

('mouse:down',function(options){(options.e.clientX,options.e.clientY)})//监听事件

6)getPointer()

7)setWidth()、setHeight()设置canvas的宽高

8)画矩形

letrect=new({left:0,top:0,width:100,height:100})

add(obj)添加图形

(rect)

10)remove(obj)移除图形

11)set()设置对象内容

12)toDataURL(obj)

4.原生canvas实现代码

<template><divclass="container"><divclass="operations"><ul><li@click="mosaic">马赛克</li><li@click="addText">添加文字</li><li@click="tailor">裁剪</li><li@click="rotate">旋转</li><li@click="exportImg">导出图片</li></ul></div><canvasref="imgContent"class="img-wrap">你的浏览器太low????</canvas></div></template><script>exportdefault{data(){return{context:'',canvas:'',isMasic:false,isText:false,isTailor:false,isTranslate:false,squareEdgeLength:20,angle:0,img:''}},mounted(){()},methods:{initData(){letimgContent=this.$=imgContent=('2d')letImg=newImage()=Img="Anonymous"='

'('width',)('height',)letself=this=()=>{letbeginX,beginY,endX,endY(Img,0,0)()('mousedown',e=>{beginX=e.offsetXbeginY=e.offsetY('mouseup',e=>{endX=e.offsetXendY=e.offsetYif(){(beginX,beginY,endX-beginX,endY-beginY)return}if(){(Img,beginX,beginY,endX-beginX,endY-beginY,0,0,endX-beginX,endY-beginY)return}})})}},drawRect(x,y,width,height,fillStyle,lineWidth,strokeStyle,globalAlpha){()(x,y,width,height)=lineWidth=strokeStylefillStyle&&(=fillStyle)globalAlpha&&(=globalAlpha)()()},//打马赛克mosaic(){letself=this()=true},makeGrid(beginX,beginY,rectWidth,rectHight){constrow=(rectWidth/)+1constcolumn=(rectHight/)+1for(leti=0;i<row*column;i++){letx=(i%row)*+beginXlety=parseInt(i/row)*+beginY(x,y)}},setColor(x,y){constimgData=(x,y,,).dataletr=0,g=0,b=0((x,y,,),(imgData))for(leti=0;i<;i+=4){r+=imgData[i]g+=imgData[i+1]b+=imgData[i+2]}r=(r/(/4))g=(g/(/4))b=(b/(/4))(x,y,,,`rgb(${r},${g},${b})`,2,`rgb(${r},${g},${b})`)},//添加文字addText(){()=true('添加文字')},//裁剪tailor(){()=true('裁剪')},//旋转rotate(){//if(===360){//=90//}else{//+=90//}//if([90,270].includes()){//('width',)//('height',)//}else{//('width',)//('height',)//}constx=/2consty=/2(0,0,,)//清理画布内容(x,y)(90*/180)(-x,-y)(,0,0)},resetClickStatus(){=false=false=false=false},exportImg(){()constexportUrl=("image/jpeg")leta=('a')a.setAttribute('download','')a.href=exportUrl(a)a.click()}}}</script><stylescopedlang="less">.operations{width:1200px;margin:0auto;ul{display:flex;align-items:center;margin-bottom:30px;li{list-style:none;margin-right:20px;cursor:pointer;}}}.img-wrap{display:block;margin:0auto;}</style>

html5中canvas画的图形如何打印以及导出pdf?

JScriptcodevarcanvas=("mycanvas");

varimg=("image/png");

('<imgsrc="'+img+'"/>');

打印是浏览器的事。用JS调用也是调用浏览器的功能,这种情况直接按CTRL+P去处理。至于PDF,装软件,只要能打印的都可以通过软件生成PDF。

若想在HTML5里用纯代码实现导出PDF是实现不了的。

怎么用html5的canvas实现箭头随着鼠标移动和旋转

下面是源码

主文件
test.htm

 
<!doctype html>
<html>
 <head>
  <mata charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <canvas id="canvas" width="400" height="400">
    <p> :(  抱歉~  <br> 您的浏览器貌似不支持HTML5的标签"canvas"的说,试试更换成
Chrome,FireFox,IE9...</p>
  </canvas>
  <script src="arrow.js"></script>
  <script src="utils.js"></script>
  <script>
  window.onload=function(){
    var canvas=document.getElementById("canvas"),
    context=canvas.getContext('2d'),
    mouse=utils.captureMouse(canvas),
    arrow=new Arrow();

    arrow.x=canvas.width/2;
    arrow.y=canvas.height/2;

    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
                                      window.mozRequestAnimationFrame ||
                                      window.oRequestAnimationFrame ||
                                      window.msRequestAnimationFrame ||
                                      function (callback) {
                                        return window.setTimeout(callback, 1000/60);
                                      });
    }
    (function drawFrame(){
    window.requestAnimationFrame(drawFrame,canvas);
    context.clearRect(0,0,canvas.width,canvas.height);

    var dx=mouse.x-arrow.x;
    var dy=mouse.y-arrow.y;

    arrow.rotation=Math.atan2(dy,dx);
    arrow.draw(context);
    }());

  };
  </script>
 </body>
</html>

var canvas=document.getElementById(“canvas”)
//即将变量 canvas 作为对 html5 canvas标签id为’canvas’ 的引用

context=canvas.getContext(‘2d’)
//获取canvas该对象后,可在其上进行图形绘制

window.requestAnimationFrame
为了便于JavaScript进行图形的重绘,各大浏览器厂商都提供了各自的API给开发者进行调用,由于各大厂商的对HTML5的支持不同,所以API没有统一,但使用厂商各自的API则在该API在对应浏览器上为最有效率的方式运行。代码中对
用户浏览器做判断,实例化能被成功引用的API接口。如果用户的浏览器没有提供该API,则使用JS的setTimeout。其特性类似于AS的 ENTER_FRAME 事件。

需要用到的2个JS文件
utils.js 可根据传入的对象判断,鼠标所在对象的相对于左上角的坐标值

unction utils(){};
utils.captureMouse=function(element){
  var mouse={x:0,y:0};
  
  element.addEventListener('mousemove',function(event){
    var x,y;
    if(event.pageX || event.pageY){
      x=event.pageX;
      y=event.pageY;
    }else{
      x=event.clientX+document.body.scrollLeft+
      document.documentElement.scrollLeft;
      y=event.clientY+document.body.scrollTop+
      document.documentElement.scrollTop;
    }
    x -= element.offsetLeft;
    y -= element.offsetTop;
    
    mouse.x=x;
    mouse.y=y;
  },false);
  
  return mouse;
};
   
计算mouse相对于容器的x,y坐标偏移,本质是判断鼠标在浏览器中的鼠标偏移,之后对浏览器中容器宽度和高度进行再次偏移。
arrow.js
绘制一个箭头的js
    function Arrow(){  this.x=0;  this.y=0;  this.color="#ffff00";  this.rotation=0;}Arrow.prototype.draw=function(context){  context.save();  context.translate(this.x,this.y);  context.rotate(this.rotation);  context.lineWidth=2;  context.fillStyle=this.color;  context.beginPath();  context.moveTo(-50,-25);  context.lineTo(0,-25);  context.lineTo(0,-50);  context.lineTo(50,0);  context.lineTo(0,50);  context.lineTo(0,25);  context.lineTo(-50,25);  context.lineTo(-50,-25);  context.closePath();  context.stroke();  context.restore(); };

熟悉AS的Graphics 的coder一定很快能熟悉使用JS的绘图API

style.css
用到的样式表

 

body{
 background-color:#bbb;
}

#canvas{
 background-color:#fff;
}

区分canvas 内外的颜色。

 

追问可否给个不用用到外部样式表的,谢谢

追答不会意思。*为力

怎么用html5的canvas实现箭头随着鼠标移动和旋转

下面是源码

主文件
test.htm

 
<!doctype html>
<html>
 <head>
  <mata charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <canvas id="canvas" width="400" height="400">
    <p> :(  抱歉~  <br> 您的浏览器貌似不支持HTML5的标签"canvas"的说,试试更换成
Chrome,FireFox,IE9...</p>
  </canvas>
  <script src="arrow.js"></script>
  <script src="utils.js"></script>
  <script>
  window.onload=function(){
    var canvas=document.getElementById("canvas"),
    context=canvas.getContext('2d'),
    mouse=utils.captureMouse(canvas),
    arrow=new Arrow();

    arrow.x=canvas.width/2;
    arrow.y=canvas.height/2;

    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
                                      window.mozRequestAnimationFrame ||
                                      window.oRequestAnimationFrame ||
                                      window.msRequestAnimationFrame ||
                                      function (callback) {
                                        return window.setTimeout(callback, 1000/60);
                                      });
    }
    (function drawFrame(){
    window.requestAnimationFrame(drawFrame,canvas);
    context.clearRect(0,0,canvas.width,canvas.height);

    var dx=mouse.x-arrow.x;
    var dy=mouse.y-arrow.y;

    arrow.rotation=Math.atan2(dy,dx);
    arrow.draw(context);
    }());

  };
  </script>
 </body>
</html>

var canvas=document.getElementById(“canvas”)
//即将变量 canvas 作为对 html5 canvas标签id为’canvas’ 的引用

context=canvas.getContext(‘2d’)
//获取canvas该对象后,可在其上进行图形绘制

window.requestAnimationFrame
为了便于JavaScript进行图形的重绘,各大浏览器厂商都提供了各自的API给开发者进行调用,由于各大厂商的对HTML5的支持不同,所以API没有统一,但使用厂商各自的API则在该API在对应浏览器上为最有效率的方式运行。代码中对
用户浏览器做判断,实例化能被成功引用的API接口。如果用户的浏览器没有提供该API,则使用JS的setTimeout。其特性类似于AS的 ENTER_FRAME 事件。

需要用到的2个JS文件
utils.js 可根据传入的对象判断,鼠标所在对象的相对于左上角的坐标值

unction utils(){};
utils.captureMouse=function(element){
  var mouse={x:0,y:0};
  
  element.addEventListener('mousemove',function(event){
    var x,y;
    if(event.pageX || event.pageY){
      x=event.pageX;
      y=event.pageY;
    }else{
      x=event.clientX+document.body.scrollLeft+
      document.documentElement.scrollLeft;
      y=event.clientY+document.body.scrollTop+
      document.documentElement.scrollTop;
    }
    x -= element.offsetLeft;
    y -= element.offsetTop;
    
    mouse.x=x;
    mouse.y=y;
  },false);
  
  return mouse;
};
   
计算mouse相对于容器的x,y坐标偏移,本质是判断鼠标在浏览器中的鼠标偏移,之后对浏览器中容器宽度和高度进行再次偏移。
arrow.js
绘制一个箭头的js
    function Arrow(){  this.x=0;  this.y=0;  this.color="#ffff00";  this.rotation=0;}Arrow.prototype.draw=function(context){  context.save();  context.translate(this.x,this.y);  context.rotate(this.rotation);  context.lineWidth=2;  context.fillStyle=this.color;  context.beginPath();  context.moveTo(-50,-25);  context.lineTo(0,-25);  context.lineTo(0,-50);  context.lineTo(50,0);  context.lineTo(0,50);  context.lineTo(0,25);  context.lineTo(-50,25);  context.lineTo(-50,-25);  context.closePath();  context.stroke();  context.restore(); };

熟悉AS的Graphics 的coder一定很快能熟悉使用JS的绘图API

style.css
用到的样式表

 

body{
 background-color:#bbb;
}

#canvas{
 background-color:#fff;
}

区分canvas 内外的颜色。

 

追问可否给个不用用到外部样式表的,谢谢

追答不会意思。*为力

canvas制作海报怎么添加文字-如何用HTML5CANVAS绘制文字

怎么在Canvas中输入文本

canvas中可以用fillText()绘出文字。

例如:

<html><body>

<canvasid="myCanvas"width="300"height="150"style="border:1pxsolid#d3d3d3;">

YourbrowserdoesnotsupporttheHTML5canvastag.</canvas>

<script>

varc=("myCanvas");

varctx=c.getContext("2d");

="20pxGeorgia";

("HelloWorld!",10,50);

="30pxVerdana";

vargradient=(0,0,c.width,0);

("0","magenta");

("0.5","blue");

("1.0","red");

=gradient;

("Bigsmile!",10,90);

</script>

<p><strong>Note:</strong>ThecanvastagisnotsupportedinInternet

Explorer8andearlierversions.</p>

</body>

</html>

====

如果想插入显示一个文件或网页,可以用<iframe>,而不是用画布<canvas>,

例如:

<iframesrc="这里写网页的URL"></iframe>

小程序:利用canvas制作文字特效

先上一图,这个是最终效果:

再看看闪耀效果:

1、先将文字画在canvas;

2、利用getImageData()获取图像数据;

3、将图像数据中黑色(你可以用其他颜色)按一定间隔取值(获取坐标);

4、在获取的坐标画矩形(你画其他形状也是可以的);

5、使用requestAnimationFrame,变换矩形颜色。

这样就闪烁起来了~~

vari=0

Page({

/***页面的初始数据*/data:{hideNav:false,colors:["#fff","#FF6E40","#FFAB40","#FFFF00","#EEFF41","#B2FF59","#69F0AE","#64FFDA","#18FFFF","#40C4FF","#E040FB","#FF4081","#ff5252"],

text:'肖战',scroll:false,setting:false},

/***生命周期函数--监听页面加载*/onLoad:function(options){letthat=this,text=('blinkText')||;({text})()},

init(){().select('#canvas').fields({node:true,size:true,}).exec((res)=>{letthat=this,text=width=res[0].widthconstheight=res[0].height

constcanvas=res[0].nodeconstctx=('2d')constdpr=1//().=width*=height*(dpr,dpr)i=(-(text)*100)/="#ffffff";(0,0,,);="bolder200pxArial";='black';='top';(text,0,100);//=5;//(text,0,100);letimageData=(0,0,,).data;//(imageData)

="#ffffff";(0,0,,);

===(,)//()constrenderLoop=()=>{()

(renderLoop)}//(renderLoop)(renderLoop)})},drawText(){vargap=7,{imageData,canvas,ctx,text,scroll}=(scroll){if(i>=){i=-}i+=2}

(0,0,,)for(varh=0;h<;h+=gap){for(varw=0;w<;w+=gap){varposition=(*h+w)*4;varr=imageData[position],g=imageData[position+1],b=imageData[position+2];

if(r+g+b==0){=[(()*)];(w+i,h,5,5);}}}

},toggleSetting(){({setting:?false:true})},setText(e){

letthat=({name:'msgSecCheck',data:{op:'textCheck',content:e.},success(res){('ContentCheck-res',res)if(==300){()({icon:'none',title:,})({'text':''})}else{({setting:false,'text':e.})()}},fail(err){('ContentCheck-errxxxx',err)

}})

},getByteLen(str){varlen=0;for(vari=0;i<;i++){varlength=(i);if(length>=0&&length<=128){len+=1;}else{len+=2;}}('文字长度',len)returnlen;},donothing(){

},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){

},

/***生命周期函数--监听页面显示*/onShow:function(){

},

/***生命周期函数--监听页面隐藏*/onHide:function(){

},

/***生命周期函数--监听页面卸载*/onUnload:function(){({data:,key:'blinkText',})},

/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){

},

/***页面上拉触底事件的处理函数*/onReachBottom:function(){

},

/***用户点击右上角分享*/onShareAppMessage:function(){

}})

如何用HTML5CANVAS绘制文字

我们可以在HTML5canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色。

绘制文字的字体由2D上下文的font属性来控制。如果你需要使用颜色来填充文字或制作描边文字,可以使用2D上下文的fillStyle和strokeStyle属性来完成。

要在canvas上绘制文字,可以通过2D上下文的fillText()函数或strokeText()函数来完成。下面是一个简单的例子:

varcanvas=(ex1);

varcontext=(2d);

=normal36pxVerdana;

=#000000;

(HTML5CanvasText,50,50);

=normal36pxArial;

=#000000;

(HTML5CanvasText,50,90);

下面的图片是上面代码的返回结果:

字体和样式

当在HTML5canvas上绘制文字的时候,我们可以设置文字的字体和样式。我们可以通过一组2D上下文的font属性来完成这些工作。这些属性和CSS中设置字体的属性是兼容的:

[fontstyle][fontweight][fontsize][fontface]

举例来说,我们可以这样设置字体:

=normalnormal20pxVerdana;

对于上面的这些属性,我们可以有下面的一些可取值:

fontstyle可取值有:

normal

italic

oblique

inherit

fontweight可取值有:

normal

bold

bolder

lighter

auto

inherit

100

200

300

400

500

600

700

800

900

fontsize:字体的尺寸,单位像素。

ontface:字体。例如:verdana,arial,serif,sans-serif,cursive,fantasy,monospace等

需要注意的是,不是所有的浏览器都支持所有这些属性的,实际使用中你需要根据实际情况做一些测试。

绘制文字

当在HTML5canvas中绘制文字的时候,你可以绘制填充文字,也可以绘制描边文字。它们分别通过2D上下文的fillText()和strokeText()函数来实现。这两个函数的定义如下:

fillText(textString,x,y[,maxWidth]);

strokeText(textString,x,y[,maxWidth]);

textString是要绘制的文字。

x和y表示文字在canvas上的位置。x参数是文字的X轴坐标,y是文字Y轴坐标,但是它如何在Y轴上定位还要取决于文本的基线。文本的基线会在后面介绍。

maxWidth表示文字在水平方向上的最大宽度。详细内容接着往下看。

下面是一个示例代码:

=36pxVerdana;

=#000000;

(HTML5CanvasText,50,50);

文本的最大宽度

可选参数maxWidth表示在canvas上绘制文字的时候,文字水平方向上最大的宽度不能大于参数指定的值。如果文本的宽度大于maxWidth指定的值,那么文字的宽度会被压缩。注意不是被剪裁掉。下面是一个例子,在canvas中绘制两串相同的文本,但是使用不同的maxWidth属性:

=36pxVerdana;

=#000000;

(HTML5CanvasText,50,50);

(HTML5CanvasText,50,100,200);

复制代码

上面的代码的返回结果如下,注意第二串文字被压缩为总宽度200像素:

文字的颜色

文字的填充或描边颜色是通过2D上下文的fillStyle和strokeStyle属性来完成的。实现方式和图形的方式相同。

canvas制作海报怎么添加文字-如何用HTML5CANVAS绘制文字

怎么在Canvas中输入文本

canvas中可以用fillText()绘出文字。

例如:

<html><body>

<canvasid="myCanvas"width="300"height="150"style="border:1pxsolid#d3d3d3;">

YourbrowserdoesnotsupporttheHTML5canvastag.</canvas>

<script>

varc=("myCanvas");

varctx=c.getContext("2d");

="20pxGeorgia";

("HelloWorld!",10,50);

="30pxVerdana";

vargradient=(0,0,c.width,0);

("0","magenta");

("0.5","blue");

("1.0","red");

=gradient;

("Bigsmile!",10,90);

</script>

<p><strong>Note:</strong>ThecanvastagisnotsupportedinInternet

Explorer8andearlierversions.</p>

</body>

</html>

====

如果想插入显示一个文件或网页,可以用<iframe>,而不是用画布<canvas>,

例如:

<iframesrc="这里写网页的URL"></iframe>

小程序:利用canvas制作文字特效

先上一图,这个是最终效果:

再看看闪耀效果:

1、先将文字画在canvas;

2、利用getImageData()获取图像数据;

3、将图像数据中黑色(你可以用其他颜色)按一定间隔取值(获取坐标);

4、在获取的坐标画矩形(你画其他形状也是可以的);

5、使用requestAnimationFrame,变换矩形颜色。

这样就闪烁起来了~~

vari=0

Page({

/***页面的初始数据*/data:{hideNav:false,colors:["#fff","#FF6E40","#FFAB40","#FFFF00","#EEFF41","#B2FF59","#69F0AE","#64FFDA","#18FFFF","#40C4FF","#E040FB","#FF4081","#ff5252"],

text:'肖战',scroll:false,setting:false},

/***生命周期函数--监听页面加载*/onLoad:function(options){letthat=this,text=('blinkText')||;({text})()},

init(){().select('#canvas').fields({node:true,size:true,}).exec((res)=>{letthat=this,text=width=res[0].widthconstheight=res[0].height

constcanvas=res[0].nodeconstctx=('2d')constdpr=1//().=width*=height*(dpr,dpr)i=(-(text)*100)/="#ffffff";(0,0,,);="bolder200pxArial";='black';='top';(text,0,100);//=5;//(text,0,100);letimageData=(0,0,,).data;//(imageData)

="#ffffff";(0,0,,);

===(,)//()constrenderLoop=()=>{()

(renderLoop)}//(renderLoop)(renderLoop)})},drawText(){vargap=7,{imageData,canvas,ctx,text,scroll}=(scroll){if(i>=){i=-}i+=2}

(0,0,,)for(varh=0;h<;h+=gap){for(varw=0;w<;w+=gap){varposition=(*h+w)*4;varr=imageData[position],g=imageData[position+1],b=imageData[position+2];

if(r+g+b==0){=[(()*)];(w+i,h,5,5);}}}

},toggleSetting(){({setting:?false:true})},setText(e){

letthat=({name:'msgSecCheck',data:{op:'textCheck',content:e.},success(res){('ContentCheck-res',res)if(==300){()({icon:'none',title:,})({'text':''})}else{({setting:false,'text':e.})()}},fail(err){('ContentCheck-errxxxx',err)

}})

},getByteLen(str){varlen=0;for(vari=0;i<;i++){varlength=(i);if(length>=0&&length<=128){len+=1;}else{len+=2;}}('文字长度',len)returnlen;},donothing(){

},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){

},

/***生命周期函数--监听页面显示*/onShow:function(){

},

/***生命周期函数--监听页面隐藏*/onHide:function(){

},

/***生命周期函数--监听页面卸载*/onUnload:function(){({data:,key:'blinkText',})},

/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){

},

/***页面上拉触底事件的处理函数*/onReachBottom:function(){

},

/***用户点击右上角分享*/onShareAppMessage:function(){

}})

如何用HTML5CANVAS绘制文字

我们可以在HTML5canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色。

绘制文字的字体由2D上下文的font属性来控制。如果你需要使用颜色来填充文字或制作描边文字,可以使用2D上下文的fillStyle和strokeStyle属性来完成。

要在canvas上绘制文字,可以通过2D上下文的fillText()函数或strokeText()函数来完成。下面是一个简单的例子:

varcanvas=(ex1);

varcontext=(2d);

=normal36pxVerdana;

=#000000;

(HTML5CanvasText,50,50);

=normal36pxArial;

=#000000;

(HTML5CanvasText,50,90);

下面的图片是上面代码的返回结果:

字体和样式

当在HTML5canvas上绘制文字的时候,我们可以设置文字的字体和样式。我们可以通过一组2D上下文的font属性来完成这些工作。这些属性和CSS中设置字体的属性是兼容的:

[fontstyle][fontweight][fontsize][fontface]

举例来说,我们可以这样设置字体:

=normalnormal20pxVerdana;

对于上面的这些属性,我们可以有下面的一些可取值:

fontstyle可取值有:

normal

italic

oblique

inherit

fontweight可取值有:

normal

bold

bolder

lighter

auto

inherit

100

200

300

400

500

600

700

800

900

fontsize:字体的尺寸,单位像素。

ontface:字体。例如:verdana,arial,serif,sans-serif,cursive,fantasy,monospace等

需要注意的是,不是所有的浏览器都支持所有这些属性的,实际使用中你需要根据实际情况做一些测试。

绘制文字

当在HTML5canvas中绘制文字的时候,你可以绘制填充文字,也可以绘制描边文字。它们分别通过2D上下文的fillText()和strokeText()函数来实现。这两个函数的定义如下:

fillText(textString,x,y[,maxWidth]);

strokeText(textString,x,y[,maxWidth]);

textString是要绘制的文字。

x和y表示文字在canvas上的位置。x参数是文字的X轴坐标,y是文字Y轴坐标,但是它如何在Y轴上定位还要取决于文本的基线。文本的基线会在后面介绍。

maxWidth表示文字在水平方向上的最大宽度。详细内容接着往下看。

下面是一个示例代码:

=36pxVerdana;

=#000000;

(HTML5CanvasText,50,50);

文本的最大宽度

可选参数maxWidth表示在canvas上绘制文字的时候,文字水平方向上最大的宽度不能大于参数指定的值。如果文本的宽度大于maxWidth指定的值,那么文字的宽度会被压缩。注意不是被剪裁掉。下面是一个例子,在canvas中绘制两串相同的文本,但是使用不同的maxWidth属性:

=36pxVerdana;

=#000000;

(HTML5CanvasText,50,50);

(HTML5CanvasText,50,100,200);

复制代码

上面的代码的返回结果如下,注意第二串文字被压缩为总宽度200像素:

文字的颜色

文字的填充或描边颜色是通过2D上下文的fillStyle和strokeStyle属性来完成的。实现方式和图形的方式相同。

html5 canvas 作业,探照灯效果,求代码

第一步,绘制画布区间
第二步,画出基础探照灯效果
第三步,JS代码进行画布旋转效果
第四步,增加CSS提示要求需要的阴影效果
可DW制作

html5 canvas 作业,探照灯效果,求代码

第一步,绘制画布区间
第二步,画出基础探照灯效果
第三步,JS代码进行画布旋转效果
第四步,增加CSS提示要求需要的阴影效果
可DW制作

如何制作html5的动画效果?

主要思想:x0dx0a首先要准备一张有连续帧的图片,然后利用HTML5Canvas的draw方法在不同的时间间隔绘制不同的帧,这样看起来就像动画在播放。x0dx0a关键技术点:x0dx0aJavaScript函数setTimeout()有两个参数,第一个是参数可以传递一个JavaScript方法,x0dx0a另外一个参数代表间隔时间,单位为毫秒数。代码示例:x0dx0asetTimeout(update,1000/30);x0dx0aCanvas的API-drawImage()方法,需要指定全部9个参数:x0dx0actx.drawImage(myImage,offw,offh,width,height,x2,y2,width,height);x0dx0a其中offw,offh是指源图像的起始坐标点,width,height表示源图像的宽与高,x2,y2表x0dx0a示源图像在目标Canvas上的起始坐标点。x0dx0ax0dx0ax0dx0ax0dx0ax0dx0ax0dx0aCanvasMouseEventDemox0dx0ax0dx0ax0dx0avarctx=null;//globalvariable2dcontextx0dx0avarstarted=false;x0dx0avarmText_canvas=null;x0dx0avarx=0,y=0;x0dx0avarframe=0;//225*5+2x0dx0avarimageReady=false;x0dx0avarmyImage=null;x0dx0avarpx=300;x0dx0avarpy=300;x0dx0avarx2=300;x0dx0avary2=0;x0dx0awindow.onload=function(){x0dx0avarcanvas=document.getElementById("animation_canvas");x0dx0aconsole.log(canvas.parentNode.clientWidth);x0dx0acanvas.width=canvas.parentNode.clientWidth;x0dx0acanvas.height=canvas.parentNode.clientHeight;x0dx0aif(!canvas.getContext){x0dx0aconsole.log("Canvasnotsupported.PleaseinstallaHTML5compatiblebrowser.");x0dx0areturn;x0dx0a}x0dx0a//get2Dcontextofcanvasanddrawrectangelx0dx0actx=canvas.getContext("2d");x0dx0actx.fillStyle="black";x0dx0actx.fillRect(0,0,canvas.width,canvas.height);x0dx0amyImage=document.createElement('img');x0dx0amyImage.src="../robin.png";x0dx0amyImage.onload=loaded();x0dx0a}x0dx0afunctionloaded(){x0dx0aimageReady=true;x0dx0asetTimeout(update,1000/30);x0dx0a}x0dx0afunctionredraw(){x0dx0actx.clearRect(0,0,460,460)x0dx0actx.fillStyle="black";x0dx0actx.fillRect(0,0,460,460);x0dx0a//findtheindexofframesinimagex0dx0avarheight=myImage.naturalHeight/5;x0dx0avarwidth=myImage.naturalWidth/5;x0dx0avarrow=Math.floor(frame/5);x0dx0avarcol=frame-row*5;x0dx0avaroffw=col*width;x0dx0avaroffh=row*height;x0dx0a//firstrobinx0dx0apx=px-5;x0dx0apy=py-5;x0dx0aif(px<-50){x0dx0apx=300;x0dx0a}x0dx0aif(py<-50){x0dx0apy=300;x0dx0a}x0dx0a//varrate=(frame+1)/22;x0dx0a//varrw=Math.floor(rate*width);x0dx0a//varrh=Math.floor(rate*height);x0dx0actx.drawImage(myImage,offw,offh,width,height,px,py,width,height);x0dx0a//secondrobinx0dx0ax2=x2-5;x0dx0ay2=y2+5;x0dx0aif(x2<-50){x0dx0ax2=300;x0dx0ay2=0;x0dx0a}x0dx0actx.drawImage(myImage,offw,offh,width,height,x2,y2,width,height);x0dx0a}x0dx0afunctionupdate(){x0dx0aredraw();x0dx0aframe++;x0dx0aif(frame>=22)frame=0;x0dx0asetTimeout(update,1000/30);x0dx0a}x0dx0ax0dx0ax0dx0ax0dx0a

HTMLCanvasAnimationsDemo-ByGloomyFish

x0dx0aPlayAnimations

x0dx0ax0dx0ax0dx0ax0dx0ax0dx0a

html5canvas的宽高有大小限制吗?

没有大小

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

小案例:canvas绘制渐变

<!DOCTYPE HTML>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

Your browser does not support the canvas element.

</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var grd=cxt.createLinearGradient(0,0,175,50);

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

</script>

</body>

</html>

刁羽宠物网还为您提供以下相关内容希望对您有帮助:

怎么用html5的canvas实现箭头随着鼠标移动和旋转

dx); arrow.draw(context); }()); }; &lt;/script&gt; &lt;/body&gt;&lt;/html&gt;var canvas=document.getElementById(“canvas”)//即将变量 canvas 作为对 html5 canvas标签id为’canvas’ 的引用context=canvas.getContext...

星空代码和旋转代码区别在于哪里

html5特效代码旋转的星空,首先要设置背景为暗一点的背景色或者图片,例如设置成黑色的背景颜色,然后把代码复制到html文件里,设置下下方JS里的一些设置,如星星的数量、星星移动的范围、星星的大小等,保存后用支持html5的浏...

Canvas的save()和restore()到底是针对什么存储什么??

save:用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。 restore:用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。

如何制作html5的动画效果?

主要思想:\x0d\x0a首先要准备一张有连续帧的图片,然后利用HTML5Canvas的draw方法在不同的时间间隔绘制不同的帧,这样看起来就像动画在播放。\x0d\x0a关键技术点:\x0d\x0aJavaScript函数setTimeout()有两个参数,...

在Html5Canvas中,有几种清除屏幕的方法

clearRect方法)context.clearRect(0, 0, canvas.width(), canvas.height());//第二种方法擦除(重新设置高宽度)canvas.attr('width', canvas.width());canvas.attr('height', canvas.height());

新建html5canvas文档和新建as3文档有什么区别

AS3则具有更强大的功能,除了2D绘图外,还支持3D渲染、多媒体处理、网络通信等功能。2、新建HTML5Canvas文档主要用于在Web上实现2D图形和交互效果,而新建AS3文档用于开发更为复杂的富媒体应用程序和游戏。

为什么HTML5canvas中drawImage()第一次加载只出现最后一个图,刷新就...

必须等到图片完全加载后才能对其进行操作, 浏览器通常会在页面脚本执行的同时异步加载图片。 如果试图在图片未完全加载之前就将其呈现到canvas 上,将不会显示任何图片. \x0d\x0a\x0d\x0a var img= new Image(...

html5canvas对象的默认宽度是多少高度是多少?

默认宽度300px,高度200px。别信那个150的

《HTML5Canvas核心技术图形、动画与游戏开发》epub下载在线阅读,求百 ...

链接:https://pan.baidu.com/s/1APsUA3OPswIOA4B9T1YCYw 提取码:o71a 书名:HTML5 Canvas核心技术 作者:David Geary 译者:爱飞翔 豆瓣评分:8.6 出版社:机械工业出版社 出版年份:2013-5 页数:486 内容简介...

html5canvas打开黑屏

禁止canvas硬件加速,从而避免了类似黑屏、闪烁、动画停滞、跳帧和擦除不全一类的问题。取消硬件加速后,动画会更加平顺,但是整体速度会变慢,这个速度的快慢程度取决于手机的计算能力。所以在安卓手机上要想达到统一的动画效果...

Top