HTML5之canvas3

最新推荐文章于 2022-04-01 10:34:15 发布
最新推荐文章于 2022-04-01 10:34:15 发布
阅读量435 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013267266/article/details/51770889
版权

 

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

  var oC =document.getElementById('c1');

  var oGC = oC.getContext('2d');

  var yImg = new Image();

  yImg.onload = function(){

     draw(this);

  };

  yImg.src = '2.png';

  function draw(obj){

     oGC.drawImage(obj,0,0);

  }

};

</script>

</head>

<body>

<canvas id="c1"width="400" height="400"></canvas>

</body>


实例：博客图片旋转效果

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

  var aInput = document.getElementsByTagName('input');

  var oImg = document.getElementById('img1');

  var yImg = new Image();

  var iNow = 0;

  yImg.onload = function(){

     draw(oImg);

  };

  yImg.src = oImg.src;

  function draw(obj){

     var oC = document.createElement('canvas');

     var oGC = oC.getContext('2d');

     oC.width = obj.width;

     oC.height = obj.height;

     obj.parentNode.replaceChild(oC,obj);

     oGC.drawImage(obj,0,0);

     aInput[1].onclick = function(){

        if(iNow==3){

          iNow = 0;

        }

        else{

          iNow++;

        }

        toChange();

     };

     aInput[0].onclick = function(){

        if(iNow==0){

          iNow = 3;

        }

        else{

          iNow--;

        }

        toChange();

     };

     function toChange(){

        switch(iNow){

          case 1:

             oC.width = obj.height;

             oC.height = obj.width;

             oGC.rotate(90*Math.PI/180);

             oGC.drawImage(obj,0,-obj.height);

          break;

          case 2:

             oC.width = obj.width;

             oC.height = obj.height;

             oGC.rotate(180*Math.PI/180);

     oGC.drawImage(obj,-obj.width,-obj.height);

           break;

          case 3:

             oC.width = obj.height;

             oC.height = obj.width;

             oGC.rotate(270*Math.PI/180);

             oGC.drawImage(obj,-obj.width,0);

          break;

          case 0:

             oC.width = obj.width;

             oC.height = obj.height;

             oGC.rotate(0);

             oGC.drawImage(obj,0,0);

          break;

        }

     }

  }

};

</script>

</head>

<body>

<inputtype="button" value="←" />

<inputtype="button" value="→" />

<div>

  <img src="2.png" id="img1" />

</div>

</body>


<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

 

window.onload = function(){

  var oC =document.getElementById('c1');

  var oGC = oC.getContext('2d');

 

  var yImg = new Image();

 

  yImg.onload = function(){

     draw(this);

  };

 

  yImg.src = '2.png';

 

  function draw(obj){

     var bg = oGC.createPattern(obj,'repeat');

     oGC.fillStyle = bg;

    

     oGC.fillRect(0,0,300,300);

    

  }

 

};

 

</script>

</head>

 

<body>

<canvas id="c1"width="400" height="400"></canvas>

</body>




<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

 

window.onload = function(){

  var oC =document.getElementById('c1');

  var oGC = oC.getContext('2d');

 

  var obj = oGC.createLinearGradient(150,100,250,200);//起始坐标点和 结束坐标点

 

  obj.addColorStop(0,'red');

  obj.addColorStop(0.5,'yellow');

  obj.addColorStop(1,'blue');

 

  oGC.fillStyle = obj;

 

  oGC.fillRect(150,100,100,100);//起始坐标   宽高度

 

 

};

 

</script>

</head>

 

<body>

<canvas id="c1"width="400" height="400"></canvas>

</body>




 

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

 

window.onload = function(){

  var oC =document.getElementById('c1');

  var oGC = oC.getContext('2d');

 

  var obj = oGC.createRadialGradient(200,200,100,200,200,150);

 

  obj.addColorStop(0,'red');

  obj.addColorStop(0.5,'yellow');

  obj.addColorStop(1,'blue');

 

  oGC.fillStyle = obj;

 

  oGC.fillRect(0,0,oC.width,oC.height);

 

 

};

 

</script>

</head>

 

<body>

<canvas id="c1"width="400" height="400"></canvas>

</body>




<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

 

window.onload = function(){

  var oC =document.getElementById('c1');

  var oGC = oC.getContext('2d');

 

  oGC.font = '60px impact';

 

  oGC.textBaseline = 'top'; //middle bottom

 

  oGC.fillText('妙味课堂',0,0);

 

 

  oGC.strokeText('妙味课堂',0,200);

 

};

 

</script>

</head>

 

<body>

<canvas id="c1"width="400" height="400"></canvas>

</body>




 

实例：文字居中

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

 

window.onload = function(){

  var oC =document.getElementById('c1');

  var oGC = oC.getContext('2d');

 

  oGC.font = '60px impact';

 

  oGC.textBaseline = 'top'; //middle bottom

 

  var w = oGC.measureText('妙味课堂').width;

 

  oGC.fillText('妙味课堂',(oC.width - w)/2,(oC.height - 60)/2);

 

};

 

</script>

</head>

 

<body>

<canvas id="c1"width="400" height="400"></canvas>

</body>

 

 




<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

 

window.onload = function(){

  var oC =document.getElementById('c1');

  var oGC = oC.getContext('2d');

 

  oGC.font = '60px impact';

 

  oGC.textBaseline = 'top'; //middle bottom

 

  oGC.shadowOffsetX = 10;

  oGC.shadowOffsetY = 10;

  oGC.shadowBlur = 3;

 

  //alert(oGC.shadowColor);  //默认颜色：黑色透明

 

  oGC.shadowColor = 'yellow';

 

  var w = oGC.measureText('妙味课堂').width;

 

  oGC.fillText('妙味课堂',(oC.width- w)/2,(oC.height - 60)/2);

 

};

 

</script>

</head>

 

<body>

<canvas id="c1"width="400" height="400"></canvas>

</body>


tianshizhimeng155
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 Canvas 3D螺旋线条动画
04-16
今天我们分享另外一个螺旋线条动画，它是基于HTML5 Canvas的，与之前不同的是，它有3D的视觉效果，并且更强大的地方是可以动态修改一些参数来改变螺旋线条的形状。同时，螺旋线条的颜色还会根据鼠标移动的不同角度而...
Canvas3 汉化补丁发布
热门推荐
大师的资源
07-17 1万+
Canvas3 汉化补丁发布 此次汉化经历了一年零一个月
canvas 三
ly479488874的博客
04-01 236
关于canvas中的beginPath和endPath 在windows中除了区域这个概念，还增加了一个新的GDI对象：也就是路径 一开始图形的形状，内部的填充都是局限性的，但是路径的出现大大丰富了关于图形的设计 关于路径的API参数 BeginPath ： 路径开始 EndPath ： 路径结束 StrokePath ： 绘制路径 FillPath ： 填充路径 对于路径的调节有moveTo lineTo moveto是移动
Canvas(3)
qq_37956730的博客
06-28 237
12 , canvas中的贝塞尔曲线 (1):二阶贝塞尔曲线 ctx.quadraticCurveTo(cpx,cpy,x,y); &lt;!-- cpx 贝塞尔控制点的 x 坐标 cpy 贝塞尔控制点的 y 坐标 x 结束点的 x 坐标 y 结束点的 y 坐标 ...
Canvas3——绘制渐变图形与绘制变形图形
小狼驿站
05-10 1624
1、Canvas绘制渐变图形 （1）绘制线性渐变 createLinearGradient() **CanvasRenderingContext2D**.createLinearGradient()方法创建一个沿参数坐标指定的直线的渐变。该方法返回一个线性 CanvasGradient对象。 CanvasGradient _ctx_.createLinearGradient(x
HTML5 Canvas五彩缤纷的3D发光水晶球动画
11-07
HTML5 Canvas五彩缤纷的3D发光水晶球动画 HTML5 Canvas五彩缤纷的3D发光水晶球动画
超炫酷HTML5 Canvas 3D旋转地球动画DEMO演示
02-28
1、html5 2、地球旋转 3、canvas
超炫酷HTML5 Canvas 3D旋转地球动画
04-16
解压密码：RJ4587 这是一款基于HTML5 Canvas的3D地球模拟动画，动画以太空作为背景，地球在太空中旋转，同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们也可以通过点击全屏按钮来全屏观看地球旋转动画，...
HTML5 Canvas 3D 倒计时爆炸特效
04-16
解压密码：RJ4587 今天要分享的这款 HTML5 3D 动画特效非常给力，它是一个基于Canvas 的倒计时爆炸效果，随着时间的走动，时间数字傍边就会有爆炸的特效，一群像素点就会在数字中心爆发出来，感觉非常酷。...
Canvas3 绘图和重叠
张晨光老师的播客
12-05 4200
组合图形  绘制阴影 function draw(){ var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); ctx.fillStyle="yellow"; ctx.strokeStyle="yellow"; var centerX=100;
canvas读取图片，输入文字，调整文字属性，拖拽文字位置，并保存图片
雨果的博客
08-19 4923
我不是专业的前端哦，可能写的不太好，见谅。 整体思路： 共有5层，除了背景颜色的div没什么用之外，canvas1用来读取图片作为背景，canvas2把文字展示出来，canvas3用来展示拖拽的文字，canvas4用来把canvas1背景图片和canvas3拖拽后的文字给画到一个canvas上，实现保存图片的目的。 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&
H5canvas 3：图像操作（滤镜）
beiluo77的博客
03-08 1053
H5canvas 3：图像操作（滤镜） canvas图像操作，这里我主要用了 drawImage() 这个方法 新建一个画布，用不同的按钮实现不同的滤镜效果。 html代码： &lt;h2&gt;图像操作&lt;/h2&gt; &lt;img src="img/12.jpg" width="100%" id="pic"/&gt; &lt;canvas id="mycan&
Canvas（三）：画各种线
香蕉你个芭呐呐的博客
05-11 2251
canvas
html5之canvas（三）
marslover521的博客
12-26 130
HTML5 canvas的 图像绘制，转换，其他 方法 img图像下载完毕事件onload img.onload =function() { } 图像绘制方法 HTML5 canvas drawImage() 方法 图像绘制 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;body&gt; &lt;img id="pic" class="g...
d3 canvas_D3和Canvas分3个步骤
cumi6497的博客
07-14 1317
d3 canvasby lars verspohl 由拉斯·韦斯波尔 D3和Canvas分3个步骤 (D3 and Canvas in 3 steps) 绑定，平局和互​​动 (The bind, the draw and the interactivity) Let’s say you’re building a data visualization using D3 and SVG. Y...
canvas3:绘制感叹号
张晨光老师的播客
12-08 1140
使用Canvas按照代码会出现如下图形显示： function draw(){ var c=document.getElementById("canvas"); var ctx=c.getContext("2d"); var width=120; var height=110; var padding=5
【HTML】Canvas(3)-绘制图片
LZGS_4的专栏
03-30 1652
开发的游戏的时候，游戏中的地图、背景、任务、物品等都是由图片组成的，本节我们来谈谈在canvas中如何操作图片吧。        canvas中提供了drawImage函数和putImageData函数来绘制图片。        drawImage()函数有3种函数原型，语法如下：        drawImage(image,dx,dy);        drawImage(image,
Canvas 3 着色
weixin_44317648的博客
05-08 427
上色 fillStyle:設定圖形填充色 fillStyle = color strokeStyle:設定圖形邊框顏色 strokeStyle = color color:可以是 css 顏色的字符串，也可以是漸變對象或者是圖案對象 canvas 默認顏色是黑色 每次改變顏色都需要重新設定，因爲之前的設定都會成爲默認值。 CSS 顏色標準包括 “orange” 顏...
Html5 canvas
最新发布
09-15
HTML5 canvas是一个矩形区域，用于绘制图形、文字、处理图片和视频等多种功能。通过获取canvas标签，并获取绘制上下文对象，可以在JavaScript中完成所有的绘制工作。使用canvas可以实现绘制基础图形、绘制文字、图形...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值