canvas画不规则图形

<template><div class="test" style="position: relative;"><canvas id="myCanvas" ref="myCanvas"  width="460" height="240">您的浏览器不支持 HTML5 canvas 标签。</canvas><div class="myslot"><slot></slot></div></div>
</template><script>
export default {name:"",components: {},props: {},data() {return {};},watch: {},computed: {},methods: {init(){// var c=document.getElementById("myCanvas");// let canvas = document.getElementById("myCanvas");const canvas = this.$refs.myCanvasconsole.log(canvas)var ctx = canvas.getContext("2d");//460*240ctx.beginPath(); ctx.moveTo(0,240); //l-竖线ctx.lineTo(0,60);   //l-斜线-sctx.lineTo(30,0); //l-斜线-ectx.lineTo(320,0); //t-横线ctx.lineTo(350,30);//r-斜线ctx.lineTo(460,30);//r-横线ctx.lineTo(460,150);//r-竖线ctx.lineTo(460,220);//r-b-斜线-sctx.lineTo(440,240);//r-b-斜线-e// ctx.lineTo(0,240);var gnt1 = ctx.createLinearGradient(0, 0, 200, 100); //线性渐变的起止坐标gnt1.addColorStop(1, '#5DB2BA'); //创建渐变的开始颜色，0表示偏移量，相对位置，最大为1ctx.lineWidth = 2;ctx.strokeStyle = gnt1;// ctx.fillStyle="#B8DEEC";// ctx.fill();// ctx.clearRect(0,0,20,20)ctx.closePath();ctx.stroke();ctx.beginPath(); ctx.moveTo(20,200);ctx.lineTo(20,60);ctx.lineTo(40,20);ctx.stroke();ctx.beginPath(); ctx.moveTo(340,0); //r-t-斜线-sctx.lineTo(360,20);ctx.lineTo(460,20);ctx.stroke();}},created() {},mounted() {this.init()}
};
</script>
<style lang="scss" scoped>.myslot{position: absolute;top: 20px;left: 48px;// width: 163px;height: 69px;color: #00d8db;// background: #5DB2BA;}
</style>

canvas画不规则图形相关推荐

微信小程序使用canvas画不规则图形
一.根据UI在海报中画不同的图片形状的路径,这中用css很简单,用canvas画的话就要了解canvas中的几个方法, 效果图: 代码如下: Page({canvasIdErrorCallback(e ...
canvas绘制不规则图形，点击获取当前图形索引
canvas给不规则图形添加点击事件有这么一个需求,把传过来的四个坐标,连成一个图形(可能是规则的,也可能是不规则的),点击某个图形,显示当前这个图形的信息 //数据格式 dataList: {lo ...
Android利用canvas画各种图形
为什么80%的码农都做不了架构师?>>> 1.首先说一下canvas类: Class Overview The Canvas class holds the "dra ...
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
Android利用canvas画各种图形(点、直线、弧、圆、扁圆、文字、矩形、多边形、曲线、圆角矩形)
1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, ...
Android自定义View之Canvas绘制基本图形（二）-- 自定义时钟
前言前面一篇主要是巩固Cavas绘制基本图形(如直线,矩形,点等等),今天同样是复习Cavas画圆,圆弧,等等,但是今天会多了一个path,以及Canvas画布的旋转.缩放.平移等等,画布的保存(s ...
Java画不规则，及拖动直线
上一个文章已经讲了画直线,三角形,多边形,椭圆,矩形,还有加了两个带名字的颜色按钮. 那么这一个博客我们主要来看看,如何画不规则的图形以及拖动鼠标画直线,还有当按钮上没有名字了,我们该怎么去处理,另外 ...
Fabricjs在Canvas上使用路径Path绘制不规则图形
场景 Fabricjs在Canvas上插入照片并设置缩小和翻转属性: Fabricjs在Canvas上插入照片并设置缩小和翻转属性_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的 ...
html5怎么画坐标图,新手如何5分钟学会用canvas在HTML5上画简单图形
HTML5中的另外一个新元素是标签.须要使用JavaScript来操做和绘制画布. canvas元素为脚本提供了一个依赖于分辨率的位图画布,它能够用于呈现图形.游戏图形或其余可视图像. 当一个更合适的 ...
新手如何5分钟学会用canvas在HTML5上画简单图形
HTML5中的另一个新元素是标签.需要使用JavaScript来操作和绘制画布. canvas元素为脚本提供了一个依赖于分辨率的位图画布,它可以用于呈现图形.游戏图形或其他可视图像. 当一个更合适的元 ...

canvas画不规则图形

canvas画不规则图形相关推荐

最新文章

热门文章