canvas画边框不一样的矩形

需求：用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 >

效果如下：

canvas画边框不一样的矩形相关推荐

canvas画圆、画带有圆角填充色的矩形
canvas画海报圆形微信头像,包括紫色背景带有圆角的矩形方法 1.画圆 2.画填充色的带有圆角的矩形
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
用canvas画“哆啦A梦”时钟
前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的canvas~欧耶~ 之前看到有人建议我画蓝胖子,对哦,我怎么把童年最喜欢的蓝胖子忘了,为了表达我对蓝胖子的歉意,所以今天画了会动的he ...
PHP画a梦,使用canvas画“哆啦A梦”时钟的代码
这篇文章主要介绍了JavaScript学习小结之使用canvas画"哆啦A梦"时钟的相关资料,需要的朋友可以参考下前言:今天看完了Js书的canvas画布那张,好开心~又是心爱的 ...
canvas画流程图
现有系统的流程图要重构,把之前的插件剔除. 找了很多画流程图的方式,但最后还是选择使用原生的canvas来画. 大概效果就是这样: 步骤: 最重要的就是数据源,数据源给好了,画起来就很方便了.下边是部 ...
wpf 去除按钮点击时会画一个点线的矩形
wpf 去除按钮点击时会画一个点线的矩形最近在研究wpf,啥都不懂,特把自己查到的有用东西,收集一下: <Page xmlns="http://schemas.microsoft.c ...
新手用canvas画时钟
学习canvas时,发现手机上的时钟图标显示是动态的,且跟真实时间一致,正好用来练手,最终效果图如下: 实现思路: 时钟分为表盘(背景矩形+圆盘+刻度)和表针(时分秒),整个实现的过程分为4步: 转换 ...
H5 canvas 画圆画圆角
canvas是H5的一大重点我们来学一下如何用canvas画圆画圆 arc(x,y,r,起始弧度,结束弧度,顺逆时针) x,y就是这个圆的圆心坐标 r是圆的半径弧度单位用Math.PI 顺逆时针 ...
【前端学习笔记—canvas标签和使用canvas画哆啦A梦案例】
目录 canvas 1. canvas是H5新增标签 2.使用canvas画出矩形 (1)第一步,要新建画布 (2)第二步,要创建一支画笔 (3)第三步,用canvas画出矩形 3. 如何使用canv ...

canvas画边框不一样的矩形

canvas画边框不一样的矩形相关推荐

最新文章

热门文章