HTML5之canvas2

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

 

 

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>无标题文档</title>

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

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

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

  oGC.moveTo(200,200);

  //弧度 = 角度*Math.PI/180

  oGC.arc(200,200,150,0,90*Math.PI/180,true);

  oGC.stroke();

};

</script>

</head>

<body>

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

</body>

 

 

实例：用arc画时钟

思路：先用弧度画出时钟的刻度线，再在上层画白色的圆盘覆盖点中心，再类似原理画时刻线，再用白色覆盖点。以中心点为起始点画分针线，时针线，秒针线

JS获取当前时间的小时，分钟，秒钟。

var oHoursValue =(-90 + oHours*30 + oMin/2) * Math.PI/180;

     var oMinValue = (-90 + oMin*6) *Math.PI/180;

     var oSenValue = (-90 + oSen*6) *Math.PI/180;

最后开一个定时器，没1秒钟调用该函数一次

 

 

 

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

window.onload = function(){

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

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

  function toDraw(){

     var x = 200;

     var y = 200;

     var r = 150;

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

     var oDate = new Date();

     var oHours = oDate.getHours();

     var oMin = oDate.getMinutes();

     var oSen =oDate.getSeconds();

     var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;

     var oMinValue = (-90 + oMin*6) * Math.PI/180;

     var oSenValue = (-90 + oSen*6) * Math.PI/180;

     /*oGC.moveTo(x,y);

     oGC.arc(x,y,r,0,6*Math.PI/180,false);

     oGC.moveTo(x,y);

     oGC.arc(x,y,r,6*Math.PI/180,12*Math.PI/180,false);*/

     oGC.beginPath();

     for(var i=0;i<60;i++){

        oGC.moveTo(x,y);

  oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

     }

     oGC.closePath();

     oGC.stroke();

     oGC.fillStyle = 'white';

     oGC.beginPath();

     oGC.moveTo(x,y);

  oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);

     oGC.closePath();

     oGC.fill();

     oGC.lineWidth = 3;

     oGC.beginPath();

     for(var i=0;i<12;i++){

        oGC.moveTo(x,y);

  oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);

     }

     oGC.closePath();

    

     oGC.stroke();

     oGC.fillStyle = 'white';

     oGC.beginPath();

     oGC.moveTo(x,y);

     oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false);

     oGC.closePath();

     oGC.fill();

     oGC.lineWidth = 5;

     oGC.beginPath();

     oGC.moveTo(x,y);

     oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);

     oGC.closePath();

     oGC.stroke();

     oGC.lineWidth = 3;

     oGC.beginPath();

     oGC.moveTo(x,y);

     oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);

     oGC.closePath();

     oGC.stroke();

     oGC.lineWidth = 1;

     oGC.beginPath();

     oGC.moveTo(x,y);

     oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);

     oGC.closePath();

     oGC.stroke();

  }

  setInterval(toDraw,1000);

  toDraw();

};

</script>

</head>

<body>

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

</body>

<style>

 

 

 

 

<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

 

window.onload = function(){

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

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

 

  oGC.moveTo(100,200);

 

  oGC.arcTo(100,100,200,100,50);

 

  oGC.stroke();

 

};

 

</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.moveTo(100,200);

 

  oGC.quadraticCurveTo(100,100,200,100);

 

  oGC.stroke();*/

 

  oGC.moveTo(100,200);

 

  oGC.bezierCurveTo(100,100,200,200,200,100);

 

  oGC.stroke();

 

};

 

</script>





 








<style>

body{ background:black;}

#c1{ background:white;}

</style>

<script>

 

window.onload = function(){

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

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

 

  oGC.translate(100,100);

 

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

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

 

  oGC.scale(2,2);

 

  oGC.fillRect(0,0,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 num = 0;

 

  var num2 = 0;

 

  var value = 1;

 

 

  setInterval(function(){

    

    

    

     num++;

    

     oGC.save();

    

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

    

     oGC.translate(100,100);

    

     if(num2 == 100){

        value = -1;

     }

     else if(num2 == 0){

        value = 1;

     }

    

     num2 += value;

    

     oGC.scale( num2*1/50,num2*1/50 );

    

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

    

     oGC.translate(-50,-50);

    

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

    

     oGC.restore(); 

    

  },30);

 

};

 

</script>

</head>

 

<body>

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

</body>

tianshizhimeng155
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas2image.js
10-12
canvas2image.js 将canvas转化为image的js插件，可以将画布内容下载实现截图功能。
canvas2
Vivian_shuang的博客
08-08 380
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> head> body> canvas id="canvas" width="500" height="500">canvas> script type="text/javascript"> var canvas = document.getElem
canvas 2
ee_Andy的博客
09-12 350
canvas 绘制圆形：  arc(x,y,半径，起始弧，结束弧，旋转方向)    -- X,Y：圆心坐标；    --弧度与角度的关系：弧度=角度*Math.PI/180  -->PI 是大写    --旋转方向：顺时针（默认：false）,逆时针（true）     示例： window.onload=function(){ var oc=document
Canvas2～茜色的调色盘可奈线12月2日剧情翻译
大师的资源
01-04 2169
 Canvas2～茜色的调色盘12月1日剧情翻译 翻译:大师♂罗莊汉化使用/转载请保留翻译人员,C2 实在难翻译.....☆日付:12/02(火)☆浩樹:啊~ 累啊爱丽丝:早上不要突然说这些浩树:你不明白大清早那个糟糕会议的痛苦‥‥  浩樹:‥什么，总觉得首席教师喜欢开会浩樹:‥我变得不得不早早工作,仅仅是为了听这个无聊的演讲浩樹:‥啊,哈,你这家伙,你只要在上
Canvas2ImagePlugin: 将HTML5画布转换为图像的简单插件
最新发布
gitblog_00019的博客
03-17 368
Canvas2ImagePlugin: 将HTML5画布转换为图像的简单插件 Canvas2ImagePlugin 是一个轻量级的JavaScript插件，允许您将HTML5画布的内容导出为JPEG、PNG或BMP格式的图片。 项目概述 HTML5画布是一种强大的功能，用于在网页上绘制图形和图像。然而，在某些情况下，可能需要将画布上的内容保存为图像文件以便于分享或进一步处理。这就是Canvas2I...
html2canvas 1.0.0-rc.5
07-27
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据...
html2canvas(1.0.0)
02-22
《html2canvas：网页元素截图神器》 html2canvas是一个非常强大的JavaScript库，它允许你在浏览器环境中将HTML渲染为Canvas图像，进而可以将其保存为图片或者进行其他图像处理。这个库在1.0.0版本中经过了优化和...
html5，canvas扇形菜单
11-21
HTML5和Canvas是现代网页开发中的重要技术，它们为创建动态、交互式的用户界面提供了强大的工具。Canvas是HTML5的一个核心元素，它允许开发者通过JavaScript在网页上进行2D绘图，无需借助Flash或其他插件。这个...
html2canvas
03-01
html2canvas的工作原理是基于HTML5的Canvas API，它解析HTML和CSS，并将其渲染到一个虚拟的Canvas元素上。这个过程包括了对CSS样式的处理、盒模型计算、文本渲染以及图像处理等复杂步骤。由于是在客户端进行操作，...
html2canvas.js
03-11
我是在html2canvas官网http://html2canvas.hertzen.com/下载的js文件 在实际使用的时候发现其init方法只是将document转换为了canvas，并没有保存为图片这一步。 所以我在此基础上进行了扩展，可以调用我封装的方法...
HTML5（三）canvas（2）
yangwei2048的博客
11-18 191
（7）变换      translate：偏移，从起始点为基准点，移动当前坐标位置      rotate：旋转（参数为弧度）      scale：缩放 例如： window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext...
canvas 二 canvas绘制表盘，及canvas曲线的绘制
凯子的专栏
05-06 1946
/** * 绘制圆 * arc(x,y,半径,起始弧度，结束弧度,旋转方向) * x,y起始位置 * 弧度与角度的关系 : 弧度 = 角度*Math.PI/180 * 旋转方向:顺时针(默认false)、逆时针(true) */ var oc = document.getElementById('canvas'); var ogc = oc.getContext('2d')
浅谈HTML5 canvas（二）
筱葭的博客
03-26 1318
1、变换 通过上下文的变换，可以将处理后的图像绘制到画布上。 可以通过如下方法来变换上下文： ①　rotate(angle)：围绕圆点旋转angle弧度； ②　scale(x, y)：缩放图像，在x方向乘以x，在y方向乘以y； ③　translate(x, y)：将坐标圆点移动到(x, y)，执行该变换后，坐标(0, 0)会变为之前由(x, y)表示的点; ④　Transform(m1
F&amp;C游戏推荐Canvas2～茜色的调色盘～～茜色のパレット～介绍&下载
bulote
11-11 1826
《Canvas2～茜色的调色盘～》（Canvas2 ～茜色のパレット～）是由F&amp;C FC01於2004年4月23日所发售的十八禁恋爱游戏。 2006年1月26日，角川书店发行了PS2版《Canvas2～彩虹色的图画～（Canvas2 ～虹色のスケッチ～）[1]》（CERO15岁以上推荐），同名动画於2005年10月至2006年3月间播映。 2006年10月6日，F&amp;...
Canvas2——使用路径
小狼驿站
05-10 890
1、绘制圆形 lang="en"> charset="UTF-8"> canvas1 function draw(id){ var canvas = document.getElementById(id); if(canvas == null){ return false;
canvas教程2-canvas的编程思想
William_fang的博客
07-25 722
文章目录一.canvas的编程思想二.源码篇章 一.canvas的编程思想 canvas的像素化：我们使用canvas绘制了一个图形，一旦绘制成功，图形就会被像素化。 canvas没有能力再次修改画布上已经存在的内容，这就是canvas比较轻的原因。 flash重的原因：它可以通过对应的API得到画布上已经存在的内容再次绘制。 canvas编程思想：我们想要图形移动，必须按照清屏-更新-渲染的逻辑进行编程，总之就是重新再画一次。 动画的过程：静态页面的连续播放。 我们把每一次绘制的静态画面叫做 “一帧”,
Canvas 2D详解
石璞东
05-09 1122
快速入门canvas
html2cavnas
weixin_33866037的博客
05-26 400
前几天看了一下谷歌的灭霸彩蛋，感觉挺炫酷的，就去学习一下，之后发现其中用了html2cavnas这个东西，所以看了一下这个。html2canvas官网：html2canvas.hertzen.com/它主要的功能是把html页面转换成图片使用：我主要是在vue里面写的demo,但其实有vue没有什么太大联系<template> <div class="contain"&g...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值