canvas画边框不一样的矩形

最新推荐文章于 2024-04-23 12:07:19 发布
最新推荐文章于 2024-04-23 12:07:19 发布
阅读量5.7k 收藏 2
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoxiaoluckylucky/article/details/80938726
版权

需求：用canvas画一个边框样式不一样的矩形

方法一：简单粗暴，直接用canvas填充矩形，给canvas标签设置样式即可。（推荐）

<!DOCTYPE html >
< html >
< head >
< title >canvas画边框不一样的长方形 </ title >
< style >
.canvas {
border-top: 5px solid #aaa;
border-right: 10px solid red;
border-bottom: 10px solid blue;
border-left: 20px solid black;
display: block;
margin: 50 auto;
}
< / style >
</ head >

< body >
< canvas id= "canvas" class= "canvas" width= "400" height= "300" ></ canvas >
< script >
var canvas = document. getElementById( "canvas");
var ctx = canvas. getContext( "2d");
ctx. fillStyle = 'pink';
ctx. fillRect( 0, 0, 400, 300);
< / script >
</ body >

</ html >

效果如下：


方法二：一条线一条线的画边框，再填充,此方法比较麻烦，且ctx.lineWidth较大时，有瑕疵

<!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 >cancas画边框样式不一样的矩形 </ title >
</ head >

< body >
< canvas id= "canvas" width= "200" height= "200" ></ canvas >
< script >
var canvas = document. getElementById( 'canvas');
var ctx = canvas. getContext( '2d');
//左边框
ctx. beginPath();
ctx. moveTo( 10, 10);
ctx. lineTo( 10, 180);
ctx. closePath(); //闭合路径
ctx. lineWidth = 1; //线的边框为10像素
ctx. strokeStyle = 'blue';
ctx. stroke(); //绘制定义的图形

//下边框
ctx. beginPath();
ctx. moveTo( 10, 180);
ctx. lineTo( 180, 180);
ctx. closePath(); //闭合路径
ctx. lineWidth = 1; //线的边框为10像素
ctx. strokeStyle = 'green';
ctx. stroke(); //绘制定义的图形

//右边框
ctx. beginPath();
ctx. moveTo( 180, 180);
ctx. lineTo( 180, 10);
ctx. closePath(); //闭合路径
ctx. lineWidth = 1; //线的边框为10像素
ctx. strokeStyle = 'red';
ctx. stroke(); //绘制定义的图形


//上边框
ctx. beginPath();
ctx. moveTo( 180, 10);
ctx. lineTo( 10, 10);
ctx. closePath(); //闭合路径
ctx. lineWidth = 1; //线的边框为10像素
ctx. strokeStyle = 'black';
ctx. stroke(); //绘制定义的图形

ctx. rect( 10, 10, 170, 170);
ctx. fillStyle = "pink";
ctx. fill();
< / script >
</ body >

</ html >

效果如下：


xiaoxiao无脸男
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 canvas画矩形时出现边框样式不一致的解决方法
09-28
HTML5画图发现里面画矩形的函数画出来的边框出现了样式不一致的问题，下面把解决问题的思路分享给大家，感兴趣的朋友不要错过
html矩形框填充颜色的代码,js canvas绘制填充填充矩形添加边框颜色
weixin_31842775的博客
06-18 2297
效果图：源码：html>canvas绘制填充矩形//绘制无填充矩形varmy1=document.getElementById("mycanvas");//访问mycanvasvarctx=my1.getContext("2d");//这个参数不需要改动ctx.beginPath();//创建路径ctx.lineWidth=5;//边框大写，也就是描边ctx.strokeSt...
利用canvas给图片添加方框和文字
最新发布
weixin_40790248的博客
04-23 319
【代码】利用canvas给图片添加方框和文字。
html中的边框线流水灯效果,基于canvas实现超炫酷的流水灯效果
weixin_28760171的博客
06-10 588
本文实例为大家分享了基于canvas实现超炫酷的流水灯效果的具体代码，供大家参考，具体内容如下基于canvas超炫酷的流水灯效果*{margin: 0;padding: 0;}canvas{border: 1px solid red;width: 100%;height: 100%;}您的浏览器不支持canvas标签。var canvas = document.getElementById("my...
html中的边框线流水灯效果,基于canvas超炫酷的流水灯效果
weixin_32637683的博客
06-10 459
基于canvas超炫酷的流水灯效果*{margin: 0;padding: 0;}canvas{border: 1px solid red;width: 100%;height: 100%;}您的浏览器不支持canvas标签。var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var ...
基于canvas绘制边框环绕进度条
博哥的二进制世界
11-04 855
基于canvas绘制边框环绕进度条案例思路完整代码 案例 如下图所示，我们想通过canvas来绘制一个环形的进度条，且封装成组件，让进度条能自适应宽高包裹元素，进度条的进度依据百分比进行渲染 思路 父盒子设置相对定位 canvas画布基于父盒子绝对定位，设置其宽高百分比为父盒子100% canvas画布首先绘制一个矩形边框，让其渲染出进度条底色 设置定时器，依据时间流速，先后绘制上边框进度条、右边框进度条、下边框进度条、左边框进度条，每个进度条所耗时间占总时间的1/4 进度条走完之后，清除定时器 进度条
[HTML5资料]Canvas教程
08-30
比如，你可以设置canvas的边框，但它不会影响到在canvas内部绘制的内容。如果不施加任何样式，canvas元素默认将是完全透明的。 在Canvas上进行绘图，我们需要使用JavaScript的Canvas API。这个API提供了一系列方法...
andorid实现圆形图片和圆形边框Demo
10-19
在Android开发中，有时我们需要将普通的矩形图片转换为圆形或者添加圆形边框来提升UI设计的美观度。本教程将详细讲解如何在Android中实现这一功能，主要涉及的知识点包括自定义View、图片处理以及图形绘制。 首先，...
画布演示
02-14
3. **基本图形绘制**：如`fillRect()`用于绘制矩形，`strokeRect()`绘制矩形边框，`arc()`用于绘制圆或弧线，`lineTo()`和`moveTo()`用于绘制线条，`beginPath()`和`closePath()`开始和结束路径，`fill()`和`stroke...
Android-RCImageView自定义圆角ImageView带边框效果
08-13
然而，原生的ImageView不支持直接设置圆角或添加边框，因此我们需要自定义一个新类来扩展ImageView的功能。 1. 创建自定义View类： 在Android项目中，我们新建一个名为RCImageView的Java类，继承自ImageView。这样...
android圆角图片，支持自定义边框颜色
01-09
总的来说，实现一个支持自定义边框颜色和大小的圆角图片在Android开发中并不复杂，但这个"CircleImageView-master"库提供了一种封装好的解决方案，使得开发者可以更加方便地在项目中应用这一特性。通过阅读和理解其...
用 canvas 做个好玩的网站背景
dfpbut5000的博客
11-12 1153
　　不知不觉又好久没更过博客了，老调新弹一下，之前做的一个小效果，觉得蛮有意思的，也有朋友问是怎么做的，就分享一下，写个博文吧。 　　先上demo吧：http://whxaxes.github.io/canvas-test/src//Funny-demo/netparticle/net_1.html 　　上面这个demo是最早写的，后来做了点小修改后就用到了自己的网站上当个ban...
html2canvas边框线,canvas边框动画效果（原创）
weixin_40005373的博客
07-10 661
bannerActive(document.getElementById("myCanvas1"));function bannerActive(object) {let c = object;let context = c.getContext("2d");let width = 800; //画布宽度let height = 500; //画布高度let fPoints = [{x: 400,...
使用canvas绘制四个角的指定样式
小火车况且况且况且的博客
08-29 588
放在一个父盒子中, 通过定位实现视觉效果。进行封装一个公用的组件形式, 将内容。
canvas 设置边框问题
XXHolic
07-06 2083
引子 近期的工作中，是继 canvas 显示模糊问题 之后碰到的第 3 个问题。 Origin My GitHub 设置边框问题 这个是示例，扫描访问二维码如下。 在手机上可以看到，设置边框后，图片就模糊了。如果 border 不占用 canvas 的高宽度，就没有那个问题，在画布上画个边框也可以。 原因应该跟 canvas 显示模糊问题中差不多，但疑问的是这种情况并没有少像素，而是展示的空间少了，画布上的像素多了，为什么也会模糊？难道是像素挤到一起重叠了？查了下资料，是有像素重叠的情况。真正原因是什
上传图片任意使用canvas画自己想画的图形并填充
qq_43033730的博客
10-11 1257
没有找到合适的框架，自己写的，代码比较糙，这是效果图 直接复制就可以啦~ <input type="file" class="sc_an" id="file_upload"/> <div class="sc_tu_view" id="jm" style="position: relative"> <img src="" id="sc_tu_xs"/...
html2canvas边框线,html2canvas 实现dashed虚线边框
weixin_34975139的博客
07-10 455
html2canvas是一个将html元素生成canvas的库，绘制的canvas大部分样式和CSS一致。比如截止1.0.0-alpha.12，虚线边框依然绘制为实线，border-collapse依然有问题。这里根据github issues里的一个思路，模拟实现了dashed边框效果。适用情况：单独边框较多，即不是完整边框，同时不考虑border-radius1、首先，在html2ca...
canvas在背景图上画点连成不规则多边形
qq_42023279的博客
07-14 1731
用canvas画点，多个点连成一个不规则的图形 <div class="workshopCanvas" @click="selectPoint"> <img style="position: absolute;left: 0px;top: 0px;width: 660px;height: 260px;" :src="ctxPic" /> <canvas style="position: absolute;" id="myCanvas" w
uniapp 操作canvas画布画红色的矩形
06-12
好的，以下是Uniapp中操作canvas画布画红色矩形的代码示例： ```html <canvas id="myCanvas" style="width: 100%; height: 100%;"></canvas> export default { mounted() { const ctx = uni....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值