canvas笔记-使用canvas画矩形及各样式(透明)
程序运行截图如下:
源码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">当前浏览器不支持Canvas,请更换浏览器后再试
</canvas><script>window.onload = function() {let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");drawRect(context, 100, 100, 400, 400, 10, "#508", "red");drawFillRect(context, 200, 200, 400, 400, 10, "#508", "blue");drawFillRect(context, 300, 300, 400, 400, 10, "#508", "rgba(255, 255, 0, 0.5)")}function drawRect(cxt, x, y, width, height, borderWidth, borderColor, fillColor){cxt.beginPath();cxt.rect(x, y, width, height);cxt.closePath();cxt.lineWidth = borderWidth;cxt.fillStyle = fillColor;cxt.strokeStyle = borderColor;cxt.fill();cxt.stroke();}function drawFillRect(cxt, x, y, width, height, borderWidth, borderColor, fillColor){cxt.lineWidth = borderWidth;cxt.fillStyle = fillColor;cxt.strokeStyle = borderColor;cxt.fillRect(x, y, width, height);cxt.strokeRect(x, y, width, height);}</script>
</body>
</html>
画矩形有两种:
一种是:使用
rect()函数画出框,然后使用:
cxt.lineWidth = borderWidth;cxt.fillStyle = fillColor;cxt.strokeStyle = borderColor;cxt.fill();
这些进行填充。
第二种是使用:
function drawFillRect(cxt, x, y, width, height, borderWidth, borderColor, fillColor){cxt.lineWidth = borderWidth;cxt.fillStyle = fillColor;cxt.strokeStyle = borderColor;cxt.fillRect(x, y, width, height);cxt.strokeRect(x, y, width, height);}
这种方式进行绘制。
关于透明相关的:
cxt.fillStyle = fillColor;
可以通过传入rgba(255, 255, 0, 0.5)这种方式设置透明度。
canvas笔记-使用canvas画矩形及各样式(透明)相关推荐
- canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题
首先是扩展canvas的context 比如扩展一个画五角星的代码 <!DOCTYPE html> <html lang="en"> <head> ...
- canvas笔记-在canvas中使用其他HTML元素
这里使用的原理是使用css把div中关于html的元素通过布局位置,以及透明相关的设置,将其设置到canvas上,这样看起来就是在canvas绘制的按钮.然后使用JavaScript获取按钮的数据或者 ...
- canvas笔记-使用canvas画圆及点阵的使用
如下例子: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
- html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图 太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
- 前端笔记之Canvas
一.Canvas基本使用 Canvas是HTML5的画布,Canvas算是"不务正业"的面向对象大总结,将面向对象玩极致. 算法为王!就是说canvas你不会,但是算法好,不怕写业 ...
- canvas笔记-画三角形并计算其外心(含算法其他绘图框架类似)
程序运行截图如下: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- canvas笔记-文本(fillText)旋转(rotate)
这里fillText直接使用rotate会有问题.估计是旋转中心有问题. 正确的逻辑为: 先使用translate移动中心点在文本起始位置,如何在0,0处fillText即可. 如果要在字符串中心进行 ...
- canvas笔记-canvas加载图片及放缩及加水印(两canvas同时使用)
首先是图片放缩 程序运行截图如下: 拉动滑动条: 源码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
- canvas笔记-canvas中用户与图形交互
运行截图如下: 点击某个圆后: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta ch ...
最新文章
- 开启基于Query的实例分割新思路!腾讯华科提出QueryInst
- 1-4-RHEL6.3-用户及组管理(Red Hat Enterprise Linux Server release 6.3)@树袋飘零
- iframe 按比例缩放_不按常理出牌!5个Excel灵异事件,能让你崩溃
- 如何通过 C# kill 指定进程?
- jquery下载地址:https://code.jquery.com/jquery/ 影响范围: 版本低于1.7的jQuery过滤用户输入数据所使用的正则表达式存在缺陷,可能导致LOCA
- centos7下安装mysql及测试centos_CentOS7安装mysql8
- php 记录报错,php报错自己记录
- RHEL7.0时间同步设置
- CodeSheep谈前后端选择
- vs 中使用32 位mysql_【转载】VS中MFC连接MySQL由于系统不同位(32/64)引起的错误:无法解析的外部符号 _mysql_init@4、_mysql_query...
- mysql block是什么,php – MySQL PDO – try {block}里面应该是什么?
- cassandra可视化工具_精华 | 140种Python标准库、第三方库和外部工具都有了
- 〈四〉ElasticSearch的认识:基础原理的补充
- bom实现方块移动_JavaScript之方块移动
- CANopen协议本质
- 使用Microsoft SQL Server Management Studio连接远程阿里云SQL Server数据库
- php中Sessionopen,php使用session提示[function.session-start]: open解决方法
- 语音唤醒的具体技术方案
- GUID分区与MBR分区有什么区别? 操作系统知识
- 【持续更新】SDN Software Defined Networks(Thomas D.Nadeau Ken Gray)翻译