HTML5图形绘制学习(1)-- Canvas 元素简介
2024-10-19 05:30:27
Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素。和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形。
这里所说的绘制图型,不是指我们可以进行可视化的图形绘制,而是要利用javascript在其中进行进行操作。
这里做个简单的canvas实例:
1.在页面中添加canvas元素
首先在页面中添加canvas元素,需要给定其高度、宽度和唯一标识id<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="canvas.js"></script> </head> <body onload="draw('canvas')"> <h1>Canvas元素示例</h1> <canvas id="canvas" width="400" height="300"> </canvas> </body> </html>
2.绘制矩形
在cavas.js文件中做绘制矩形操作:
function draw(id){ // 1.获取canvas对象 var canvasDom = document.getElementById(id); if(canvasDom == null){ return false; } // 2.获取上下文 var context = canvas.getContext('2d'); // 3.填充与绘制边框 context.fillRect(0, 0, 400, 300); // 4.设定绘图样式 context.fillStyle = '#EEF'; // 填充颜色 // 5.制定线宽 context.lineWidth = 1; // 6.指定颜色值 context.strokeStyle = 'blue'; // 设定边框颜色 // 7.绘制矩形 context.fillRect(50, 50, 100, 100);// 填充矩形 context.strokeRect(50, 50, 100, 100); // 绘制矩形边框 }
最终效果
3.绘制圆形
function drawCircle(id){ // 1.获取canvas var canvasDom = document.getElementById(id); if(canvasDom == null){ return false; } // 2.获取上下文 var context = canvas.getContext('2d'); // 3.填充颜色 context.fillStyle = "#EEF"; // 4.进行绘制 context.fillRect(0, 0, 400, 300); var n = 0; for(var i=0; i<10; i++){ // 开始路径 context.beginPath(); // 绘制圆形路径 context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true); // 结束路径 context.closePath(); // 填充渐变色 context.fillStyle = "rgba(255, 0, 0, 0.25)"; // 进行图形绘制 context.fill(); } }
效果图:
最新文章
- 读书笔记<;白帽子讲web安全>;
- CLR via C# 3rd - 01 - The CLR&#39;s Execution Model
- nltk.download()出错解决
- Python 小游戏 Bunny
- [USACO2004][poj2373]Dividing the Path(DP+单调队列)
- SOAP 格式设置选项
- codeforces B. Color the Fence 解题报告
- Spring中的Jdbc事务管理
- ImportError: cannot import name &#39;NUMPY_MKL&#39;
- 【转】Android bluetooth介绍(三): 蓝牙扫描(scan)设备分析
- Websense更名换帅
- C++编程练习(1)----“实现简单的线性表的顺序存储结构“
- Vijos1144小胖守皇宫【树形DP】
- Python 标准库 urllib2 的使用细节(转)
- Android 多媒体 播放音视频
- VMware Pro 14.1.2 官方正式版及激活密钥
- Mac谷歌浏览器跨域
- 基于centos7下appium环境搭建
- sql 思路
- Android开发之SurfaceView