用canvas绘画一些图形(图标)
最近在研究HTML5,发现其中的canvas用途很广。不但可以绘制图形,还可以制作图片线性渐变,而且还能渲染文字做成特效。
是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。
canvas元素会在网页上创建一个空白区域(画布),然后通过API操作这个区域,与空白的div元素相似,用途完全不同(给予一块选中的画布,在其中操作)!
在网页中很多图标,都是用canvas绘画出来的,比如以前看到的那种箭头→这种都是可以画出来的!我们也做几个实例,画画
Html代码: <canvas id="canvasFive" width="600" height="250"></canvas>js代码: var canvas = document.getElementById("canvasFive");var context = canvas.getContext("2d");context.beginPath();//设置是个顶点的坐标,根据顶点制定路径for (var i = 0; i < 5; i++) {context.lineTo(Math.cos((18+i*72)/180*Math.PI)*50+200,-Math.sin((18+i*72)/180*Math.PI)*50+200);context.lineTo(Math.cos((54+i*72)/180*Math.PI)*20+200,-Math.sin((54+i*72)/180*Math.PI)*20+200);}context.closePath();//设置边框样式以及填充颜色context.lineWidth="3";context.fillStyle = "pink";context.strokeStyle = "wheat";context.fill();context.stroke();
效果就是这样,这些就是根据sin的绘画,多边形,还想要跟多边,就改变sin值!
下面给大家画一个学习canvas必须能掌握的东西,八卦图
<canvas id="myCanvas" width="600" height="600"></canvas><script>var myCanvas = document.getElementById("myCanvas");// 通过画布元素获取到上下文(画笔)var ctx = myCanvas.getContext("2d");// 右边白色的半圆ctx.fillStyle = "#fff";ctx.beginPath();ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90);ctx.fill();// 左边黑色的圆ctx.fillStyle = "#000";ctx.beginPath();ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90, true);//逆时针画圆ctx.fill();// 左边白色的小圆ctx.fillStyle = "#fff";ctx.beginPath();ctx.arc(300, 250, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90, true);ctx.fill();// 右边黑色的小圆ctx.fillStyle = "#000";ctx.beginPath();ctx.arc(300, 350, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90);ctx.fill();// 黑色的小圆点ctx.fillStyle = "#000";ctx.beginPath();ctx.arc(300, 250, 5, 0, Math.PI * 2);ctx.fill();// 白色的小圆点ctx.fillStyle = "#fff";ctx.beginPath();ctx.arc(300, 350, 5, 0, Math.PI * 2);ctx.fill();</script>
上面的解析每段代码,参考图片去看! 然后就可以绘画各类小图标了!
用canvas绘画一些图形(图标)相关推荐
- 前端小项目:使用canvas绘画哆啦A梦
最近在学canvas元素,<canvas>标签只是图形容器,必须使用js来绘制图形.为了增强对canvas元素的理解,于是用canvas画了一个哆啦A梦来 要实现的效果图 在线预览 要想绘 ...
- html怎么给没张图片添加单击事件,如何在Canvas上的图形/图像绑定事件监听的实现...
HTML中只能为元素/标签绑定监听函数: Canvas绘图中只有一个元素-canvas,每一个图形/图像都不是元素,不能直接进行事件绑定. 解决办法:"事件委托"--让canvas ...
- Canvas学习:封装Canvas绘制基本图形API
Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习 从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方法, ...
- html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形 从绘制直线 到 路径 Jack Lee 的 CSDN 博客 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
- 安卓自定义view中 绘画基本图形点线面,矩形,方形,圆,扇形,文字及沿着特定方向布局,自定义圆角ImageView图片等等相关api使用方法及举例
安卓自定义view中 绘画基本图形点线面,矩形,方形,圆,扇形,文字及沿着特定方向布局,自定义圆角ImageView图片等等相关api使用方法及举例,图片压缩处理逻辑 本文旨在介绍自定义View的实现 ...
- WebGL(三)——学习Canvas及简单图形绘制
WebGL(三)--学习Canvas及简单图形绘制 Canvas简介 canvas是HTML5新增的一个可以使用javascript脚本在其中绘制图像的HTML元素(容器),它可以用来制作图像.动画, ...
- 用DELPHI中Canvas特性开发图形软件
( 一)Canvas和CDC绘图方法比较: 我们可以从以下表格中看到Tcanvas和CDC相似的函数: 表 1--1 Canvas方法 CDC方法 功能 Arc Arc ...
- html根据坐标动态生成图形,H5最强接口之canvas实现动态图形功能
上个文章中我们分享了如何利用canvas来进行图形绘制,但是绘制的都是静态图形,本周我们就来学习如何利用canvas进行动态图形绘制. 什么是动画? 我们在绘制动画之前必须要弄清楚什么是动画,一个动画 ...
- Android自定义View之Canvas绘制基本图形(二)-- 自定义时钟
前言 前面一篇主要是巩固Cavas绘制基本图形(如直线,矩形,点等等),今天同样是复习Cavas画圆,圆弧,等等,但是今天会多了一个path,以及Canvas画布的旋转.缩放.平移等等,画布的保存(s ...
最新文章
- Halcon 读写txt文件,以逗号或空格分割
- C#按关闭按钮实现最小化,按ESC才关闭的实现【含系统消息大全】
- VMware 虚拟机的虚拟磁盘编程知识点扫盲之一
- MySQL Replication--多线程复制MTS
- 【十九】require和include的区别
- boost::geometry::bg::model::multi_linestring用法的测试程序
- MySQL(22)--- NULL 值处理
- RTL8188ce无线网卡驱动在Ubuntu/Ubuntu Kylin 13.10中的安装-转
- JdbcTemplate查询返回JavaBean的几种方法
- 如何更换 Mac 登录画面的背景桌面?
- mfc 添加变量出现灾难性故障_实验室近期论文:储罐灾难性失效事故的漫堤预测模型...
- Photoshop栅格化图层到底什么意思,什么时候该用栅格化涂层
- springBoot17_缓存:环境搭建、原理、Cacheable、CachePut、CacheEvit、Caching、阿里云镜像加速、整合redis作为缓存、缓存原理、自定义缓存
- 房地产支撑不起大国崛起
- CCF 201912-5 魔数 满分题解
- What is 虫洞攻击?
- arx开发版本对照表
- 什么是4:4:4、4:2:2、4:2:0?了解图像压缩取样的方式
- 英语 —语法— 句子成分
- iPhone6 像素 分辨率