canvas第一天

最新推荐文章于 2024-06-17 14:02:51 发布
最新推荐文章于 2024-06-17 14:02:51 发布
阅读量116 收藏
点赞数
分类专栏： html css 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41871290/article/details/81020829
版权
html 同时被 2 个专栏收录
27 篇文章 0 订阅
订阅专栏
css
24 篇文章 0 订阅
订阅专栏

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>迷你图</title>

<script src="./js/jquery-3.3.22.js"></script>

<style lang="">

.sparkline{

background: #dddddd;

color: red;

}

</style>

</head>

<body>

<!-- <span class="sparkline">3 5 7 6 6 9 11 15</span> -->

<!-- this is a red square: <canvas id="square" width=10 height=10></canvas> -->

<!-- this is a blue circle: <canvas id="circle" width=10 height=10></canvas> -->

<canvas id="myCanvas" width=1000 height=500></canvas>

</body>

<script>

/**

迷你图

*/

// function onLoad(f) {

// if (onLoad.loaded)

// window.setTimeout(f,0);

// else if (window.addEventListener)

// window.addEventListener("load", f, false);

// else if (window.attachEvent)

// window.attachEvent("onload", f);

// }

// onLoad.loaded = false;

// onLoad(function() {

// onLoad.loaded = true;

// var elts = document.getElementsByClassName("sparkline");

// main: for(var e = 0; e < elts.length;e++) {

// var elt = elts[e];

 

// var content = elt.textContent || elt.innerText;

// var content = content.replace(/^\s+|\s+$/g,"");

// var text = content.replace(/#.*$/gm,"");

// text = text.replace(/[\n\r\t\v\f]/g,"");

// var data = text.split(/\s+|\s*,\s*/);

// for(var i = 0;i < data.length; i++){

// data[i] = Number(data[i]);

// if (isNaN(data[i])) continue main;

// }

// var style = getComputedStyle(elt,null);

// var color = style.color;

// var height = parseInt(elt.getAttribute("data-height")) || parseInt(style.fontSize) || 20;

// var width = parseInt(elt.getAttribute("data-width")) || data.length * (parseInt(elt.getAttribute("data-dx")) || height/6);

// var ymin = parseInt(elt.getAttribute("data-ymin")) || Math.min.apply(Math, data);

// var ymax = parseInt(elt.getAttribute("data-ymax")) || Math.max.apply(Math, data);

// if(ymin >= ymax) ymax = ymin + 1;

 

// var canvas = document.createElement("canvas");

// canvas.width = width;

// canvas.height = height;

// canvas.title = content;

// elt.innerHTML = "";

// elt.appendChild(canvas);

 

// var context = canvas.getContext('2d');

// for(var i = 0;i < data.length; i++) {

// var x = width*i/data.lenth;

// var y = (ymax-data[i])*height/(ymax-ymin);

// context.lineTo(x,y);

// }

// context.strokeStyle = color;

// context.stroke();

// }

// })

/**

红色正方形和蓝色圆

*/

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

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

// context.fillStyle = "#f00";

// context.fillRect(0,0,10,10);

 

// canvas = document.getElementById("circle");

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

// context.beginPath();

// context.arc(5,5,5,0,2*Math.PI,true);

// context.fillStyle = "#00f";

// context.fill();

 

/**

*绘制线段和填充多边形

*/

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

// var c = canvas.getContext('2d');

// c.beginPath();

// c.moveTo(100,100);

// c.lineTo(200,200);

// c.lineTo(100,200);

// c.moveTo(300,100);

// c.lineTo(300,200);

// // c.fill();

// // c.stroke();

// // c.closePath();

 

// function polygon(c,n,x,y,r,angle,counterclockwise) {

// angle = angle || 0;

// counterclockwise = counterclockwise || false;

// c.moveTo(x + r*Math.sin(angle), y - r*Math.cos(angle));

// var delta = 2*Math.PI/n;

// for(var i = 1; i < n; i++) {

// angle += counterclockwise?-delta:delta;

// c.lineTo(x + r*Math.sin(angle), y - r*Math.cos(angle));

// }

// c.closePath();

// }

// c.beginPath();

// // 三角形

// polygon(c, 3, 50, 70, 50);

// // 正方形

// polygon(c, 4, 150, 60, 50, Math.PI/4);

// //五边形

// polygon(c, 5, 255, 55, 50);

// // 六边形

// polygon(c, 6, 365, 53, 50, Math.PI/6);

// // 六边形中的小正方形

// polygon(c, 4, 365, 53, 20, Math.PI/4, true);

 

// c.fillStyle = "#ccc";

// c.strokeStyle = "#008";

// c.lineWidth = 5;

 

// c.fill();

// c.stroke();

 

/**

*科赫雪花

*/

// var deg = Math.PI/180;

// function snowflake(c, n, x, y, len) {

// c.save();

// c.translate(x,y);

// c.moveTo(0,0);

// leg(n);

// c.rotate(-120*deg);

// leg(n);

// c.rotate(-120*deg);

// leg(n);

// c.closePath();

// c.restore();

 

// function leg(n) {

// c.save();

// if(n == 0) {

// c.lineTo(len, 0);

// }

// else{

// c.scale(1/3,1/3);

// leg(n-1);

// c.rotate(60*deg);

// leg(n-1);

// c.rotate(-120*deg);

// leg(n-1);

// c.rotate(60*deg);

// leg(n-1);

// }

// c.restore();

// c.translate(len,0)

// }

// }

// snowflake(c,0,5,115,125);

// snowflake(c,1,145,115,125);

// snowflake(c,2,285,115,125);

// snowflake(c,3,425,115,125);

// snowflake(c,4,565,115,125);

// c.stroke();

 

/**

*在路径中添加曲线

*/

/**

*角度制转换为弧度制工具

*/

// function rads(x) {

// return Math.PI*x/180;

// }

// c.beginPath();

// // 圆

// c.arc(75,100,50,0,rads(360),false);

// c.moveTo(200,100);

// // 楔

// c.arc(200,100,50,rads(-60),rads(0),false);

// c.closePath();

// // 不同方向的楔

// c.moveTo(325, 100);

// c.arc(325,100,50,rads(-60),rads(0),true);

// c.closePath();

// // 圆角

// c.moveTo(450, 50);

// c.arcTo(500,50,500,150,30);

// c.arcTo(500,150,400,150,20);

// c.arcTo(400,150,400,50,10);

// c.arcTo(400,50,500,50,0);

// c.closePath();

 

// // 二次贝塞尔曲线：一个控制点

// c.moveTo(75, 250);

// c.quadraticCurveTo(100,200,175,250);

// c.fillRect(100-3,200-3,6,6);

 

// // 三次贝塞尔曲线

// c.moveTo(200,250);

// c.bezierCurveTo(220,220,280,280,300,250);

// c.fillRect(220-3,220-3,6,6);

// c.fillRect(280-3,280-3,6,6);

 

// c.fillStyle = "#ccc";

// c.strokeStyle = "#008";

// c.lineWidth = 5;

// c.fill();

// c.stroke();

 

// 图形状态管理工具

// 恢复最后一次保存的图形状态，但是让该状态从栈中弹出

CanvasRenderingContext2D.prototype.revert = function() {

this.restore(); //回复最后一次保存的图形状态

this.save(); //再次保存它以便后续使用

return this; //允许方法链

};

// 通过o对象的属性来设置图形属性

// 或者，如果没有提供参数，就以对象的方式返回当前属性

// 要注意是，他不处理变换和裁剪区域

CanvasRenderingContext2D.prototype.attrs = function(o) {

if(o) {

for(var a in o)

this[a] = o[a];

return this;

}

else return {

fillStyle: this.fillStyle, font: this.font,

globalAlpha: this.globalAlpha,

globalCompositeOperation: this.globalCompositeOperation,

lineCap: this.lineCap, lineJoin: this.lineJoin,

lineWidth: this.lineWidth, miterLimit: this.miterLimit,

textAlign: this.textAlign,textBaseline: this.textBaseline,

shadowBlur:this.shaowBlur,shadowColor:this.shadowColor,

shadowOffsetX: this.shadowOffsetX, shadowOffsetY: this.shadowOffsetY,

strokeStyle:this.strokeStyle

}

}

</script>

</html>

静默思想
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
世界第一ADC20231113
11-13
标题“世界第一ADC20231113”可能指的是某个电子竞技比赛或者游戏中的一名顶尖射手（ADC，Attack Damage Carry），在2023年11月13日这一天获得了全球第一的荣誉。然而，这个标题本身并不直接关联到IT技术知识，而是...
HenCoderDemo1:自定义View第一天的demo
04-30
"HenCoderDemo1:自定义View第一天的demo" 这个标题表明这是一个关于Android自定义View的学习项目，出自HenCoderPlus系列教程的第一天内容。自定义View在Android开发中是一项重要的技能，它允许开发者创建具有独特...
canvas学习——第一天
weixin_42645490的博客
02-05 170
偷偷学习canvas第一天 之前看到有人用canvas做了很多好玩的动画以及简单的游戏，感觉很有意思，所以也来从头记录一下学习过程。 一、canvas 简介 ​ 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 ​它最初由苹果内部使用自己 MacOS X WebKit 推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过 Gecko
canvas第一天(画折线和不规则矩形)
阳神
02-14 333
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> canvas{ background: blue; } </style> <title&...
canvas学习——第四天
weixin_42645490的博客
02-22 328
canvas学习——第四天 canvas太阳系 研究了一下canvas太阳系，总结一下… 暂时用了几张图片来代替一下地球和月球，之后再进行优化，大致是这样的： 我是在vue项目上面使用的，先说一下使用时出现的一些问题： 首先是在canvas上使用图片时不显示图片，开始我是这样写的： 可以看到已经是读取到地址了，但是就是不显示，就很烦，但是如果是static的路径时会正常读取到，后来百度找到路径这样写： 这样会正常显示图片，具体的原因好像是webpack打包问题，读取assets里的图片时需要requi
canvas学习——第二天
weixin_42645490的博客
02-21 150
偷偷学习canvas第二天 使用canvas添加样式 1.fillStyle = color 填充颜色 2.strokeStyle = color 轮廓颜色 用之前的图形举例： draw() { const canvas = document.getElementById('canvas') // 获取canvas if (canvas.getContext) { // 检测支持性 const ctx = canvas.getContext('2d')
canvas
qq_39406353的博客
08-20 853
canvas基本用法 一、canvas简介 `<canvas>` 是 `HTML5` 新增的，一个可以使用脚本(通常为`JavaScript`)在其中绘制图像的 `HTML` 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 `Canvas`是由`HTML`代码配合高度和宽度属性而定义出的可绘制区域。`JavaScript`代码可以访问该区域，类似于其他通用的二维`API`，通过一套完整的绘图函数来动态生成图形。 二、Canvas基本使用 2.1
《canvas》之第2章 直线图形
yxqq378287007的博客
06-23 355
canvas 直线图形
Canvas倒计时
最新发布
valsedefleurs的博客
06-17 324
用Canvas绘制一个倒计时组件，显示距离新年还有多长时间，精确到秒，该倒计时需要实时更新。
用canvas绘制一个时钟--学习canvas第二天
RisaSama的博客
05-09 196
先来看效果图，新手学的比较慢，做的粗糙一点。 首先获取到canvas。获取2d属性，修改他的值。 var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), FONT_HEIGHT = 15, MARGIN = 35, HAND_TRUNCATION = canvas.width/25...
学习HTML5 Canvas这一篇文章就够了
热门推荐
完善飞跃
06-16 16万+
一、canvas简介&amp;amp;lt;canvas&amp;amp;gt; 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mo
canvas开发专题-第二天
山鬼Sakura
11-16 261
canvas对图片的操作
day110:第110天
05-03
在编程学习的第110天，我们关注的是使用角度滤镜，这涉及到自定义滤镜的实现。在Web开发中，特别是在图像处理和视觉效果领域，滤镜是一种常见的技术，用于改变或增强图像的外观。JavaScript作为一种强大的客户端脚本...
Canvas-Your-Goals
04-11
在大多数情况下，它们是简单的任务，可以度过一天，一周或很长的时间。 但是有时候它们并不简单，我们的目标远非如此。 有时，它们似乎太遥不可及，无法量化以成功实现它们。 我们提出我们为之奋斗的梦想； 有些人...
利用html5技术加载天地图
09-16
标题“利用HTML5技术加载天地图”涉及到的是在现代网页应用中如何集成并展示天地图这一地理信息系统（GIS）的服务。HTML5是超文本标记语言HTML的第五个版本，它引入了许多新特性，使得Web开发者可以创建更丰富、更具...
calc函数 ---css3语法
GUK
06-25 5595
calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？这一点也让我百思不得其解，今天有一同事告诉我，说CSS3中有一个属性能实现自适应的布局，首先让我想到的是box-sizing，但跟我说还可以计算，这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍，但一直没有深入，也没有自己去测试过。今天花了一...
小程序全面屏底部按钮适配
GUK
05-29 4890
如果你的小程序页面按钮有用fixed定位到底部的话，那你一定会遇到兼容全面屏的坑（与底部横条重叠）。查了下文档，发现能用的就只有一个api： wx.getSystemInfoSync()wx.getSystemInfoSync() ​ 封装一个全局的函数 代码如下: app.js onLaunch: function (e) { // 判断设备是否为全面屏 t...
用最短的CSS样式，写出好的效果
GUK
06-29 3526
https://xxxgitone.github.io/2017/03/27/shape/ 蒙版文字 覆盖一层蒙版，并在蒙版上书写文字。需要2层，从低到上为图片层、蒙版层(上面可写字)     &lt;div class='box' &gt; &lt;div class='back'&gt;&lt;/div&gt; &lt;!--正文层--&gt; &lt;div class=...
前端PC-移动端CSS公共样式+HTML
GUK
05-08 2870
一：移动端公共样式 [css] view plain copy /* 禁用iPhone中Safari的字号自动调整 */   html {       -webkit-text-size-adjust: 100%;       -ms-text-size-adjust: 100%;       /* 解决IOS默认滑动很卡的情况 */       -webkit-overflow-s...
HTML入门：第一天学习总结
"html学习笔记第一天总结.pdf" 在深入学习HTML之前，我们首先需要理解网页的基本概念。网页是网站的一部分，是展示特定内容的集合，这些内容可以包括文字、图片、链接、声音和视频等。一个网页通常以HTML（超文本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值