适合0基础的web开发系列教程-canvas

1、在学习canvas之前，一定要安装一个高级浏览器，推荐最新版本的chrome.因为不是每个版本的浏览器都支持canvas.

2、canvas是用来在网页中绘图的，可以通过javascript程序在网页里面绘图。

3、canvas就是一个画布，我们使用js在上面进行绘图。

4、学习canvas需要一定的数学知识和空间想象能力。

5、如果想深入学习canvas，可以学习夜鹰教程网的canvas视频教程。

下面感受一下使用canvas绘图：

<canvas id="myCanvas"></canvas><script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF6600';
ctx.fillRect(0,0,80,100);
</script>

下面是一个制作loding的代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">*{margin: 0;padding:0;}#box1{position: absolute;left:0px;top:0px;   background-color: aquamarine;       }</style></head><body><canvas id="box1" width="500" height="500">          </canvas><script type="text/javascript">var can1=document.querySelector("#box1");//获取canvas对象 相当于画布   技术咨询QQ：1416759661 微信号：yyjcw10000var ctx=can1.getContext("2d");//设置绘图环境 相当于画笔function drawloding(r)//r代表loding旋转的角度{ctx.clearRect(0,0,can1.width,can1.height);ctx.beginPath();ctx.strokeStyle="white";ctx.lineWidth=2;ctx.arc(250,250,100,0,2*Math.PI,false);ctx.stroke();  ctx.save();ctx.beginPath();             ctx.lineWidth=5;ctx.lineCap="round";var linerstyle= ctx.createLinearGradient(100,0,0,400);linerstyle.addColorStop(0,"red");linerstyle.addColorStop(1,"green");ctx.strokeStyle=linerstyle;ctx.arc(250,250,100,0,(r/180)*Math.PI,false);ctx.stroke();ctx.closePath();   ctx.restore();ctx.save();ctx.beginPath();               ctx.lineWidth=2;ctx.lineCap="round";ctx.arc(250,250,95,0,(r/180)*Math.PI,false);ctx.stroke();ctx.closePath();   ctx.restore();ctx.save();ctx.beginPath();               ctx.lineWidth=2;ctx.lineCap="round";ctx.arc(250,250,105,0,(r/180)*Math.PI,false);ctx.stroke();ctx.closePath();  ctx.restore();ctx.save();var txtstr=parseInt(r*100/360)+"%";ctx.beginPath();ctx.font="lighter 18px 微软雅黑"ctx.lineWidth=1;ctx.strokeText(txtstr,240,260);ctx.restore();}drawloding(0);var i=0;var timer=setInterval(function(){i++;if(i>360){clearInterval(timer);}drawloding(i);},30)//</script></body>
</html>

除此之外，还能使用canvas绘制出更多的其他图形：

无需用第三方的库，就能自己绘制出来以上的图形，如果再配合上js定时器，还可以实现动画效果。

转载于:https://www.cnblogs.com/yyjcw/p/10213746.html

适合0基础的web开发系列教程-canvas相关推荐

适合0基础的web开发系列教程-换行和水平线
最近忙于期末考试命题,很久没有更新随笔了. 今天给大家总结的是换行和水平线 <br/> 可插入一个简单的换行符. <hr/> 水平分隔线(horizontal rule)可以在 ...
适合0基础的web开发系列教程-web 存储
HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...
适合0基础的web开发系列教程-文本格式标签汇总
html标签主要是起结构的作用,布局的效果主要靠css完成,比如颜色.背景.字体大小.对齐等. 不过html标签中也有一些常用的文本格式化标签,能对文本内容进行简单的格式设置. 比如加粗文字.定义斜体 ...
【0基础QQ机器人开发】基于go-cqhttp的QQ机器人开发教程,仅供自学
文章目录一.本文目的: 二.实现历程: 三.开发过程 1.准备工作 1.cq-http的下载地址:[Releases · Mrs4s/go-cqhttp (github.com)](https:// ...
Python适合0基础菜鸟学吗
前言经常有小伙伴问:Python适合0基础初学编程的人学吗?今天我们就来从Python的功能和特性方面看一下,Python是否能让新人快速上手. 1.非常适合.我觉得刚开始学编程,负担越少越好,应该 ...
ASP .NET Core Web MVC系列教程：使用ASP .NET Core创建MVC Web应用程序
本系列教程翻译自微软官方教程,官方教程地址:Get started with ASP.NET Core MVC | Microsoft Docs 本系列教程介绍了构建MVC Web应用程序的基础知识. ...
python学全栈还是运维_Python全栈学习——Python基础及Web开发
原标题:Python全栈学习--Python基础及Web开发在DevOps火热的敏捷行业中,无论是开发还是运维都在互联网快速发布下练就了一身的本领,微服务下的敏捷开发体系及智能运维体系都在实战中逐步 ...
C#微信公众号开发系列教程三（消息体签名及加解密）
http://www.cnblogs.com/zskbll/p/4139039.html C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试) C ...
python教程视频-有没有适合零基础小白学的python教程，视频或者书籍都可以?
当你想要自学 python3 编程时,面临的第一个问题是:"我应该看哪些书/教程/视频?"我有一份亲自验证过的极简答案.我刚经过 python3 入门并已开始实战数据分析与爬虫,这 ...

适合0基础的web开发系列教程-canvas

适合0基础的web开发系列教程-canvas相关推荐

最新文章

热门文章