canvas制作印章

<template><div><canvas id="canvas" width="166" height="166"></canvas></div>
<template>export default {data () {return {isColor: 'red',//印章颜色checked: '', // 横向文checked1: '', // 下弦文shape: 1, // 印章形状(1.方形 2.圆形 )sealType: '3', // 印章类型(1.公章 2.法人章 3.财务专属章)},methods: {//圆形印章createSeal (id, company, name) {let canvas = document.getElementById(id)let context = canvas.getContext('2d')// 绘画边框let width = canvas.width / 2let height = canvas.height / 2context.lineWidth = 7context.strokeStyle = this.isColorcontext.beginPath()context.arc(width, height, width - 7, 0, Math.PI * 2)context.stroke()// 画五角星create5star(context, width, height, 10, this.isColor, 0)// 绘制印章名称context.font = '10px Helvetica'context.textBaseline = 'middle'// 设置文本的垂直对齐方式context.textAlign = 'center' // 设置文本的水平对对齐方式context.lineWidth = 1context.fillStyle = this.isColorcontext.fillText(this.transverseWord, width, height + 40) // 绘画文字(横行文)context.font = '8px Helvetica'context.fillText(this.downWord, width, height + 60) // 绘画文字(下弦文)// 绘制印章单位context.translate(width, height)// 平移到此位置,context.font = '14px Helvetica'let count = company.length// 字数let angle = 4 * Math.PI / (3 * (count - 1))// 字间角度let chars = company.split('')let cfor (let i = 0; i < count; i++) {c = chars[i]// 需要绘制的字符if (i == 0) { context.rotate(5 * Math.PI / 6) } else { context.rotate(angle) }context.save()context.translate(60, 0)// 平移到此位置,此时字和x轴垂直context.rotate(Math.PI / 2)// 旋转90度,让字平行于x轴context.fillText(c, 0, 5)// 此点为字的中心点context.restore()}// 绘制五角星/*** 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对          称轴上* rotate:绕对称轴旋转rotate弧度*/function create5star (context, sx, sy, radius, color, rotato) {context.save()context.fillStyle = colorcontext.translate(sx, sy)// 移动坐标原点context.rotate(Math.PI + rotato)// 旋转context.beginPath()// 创建路径let x = Math.sin(0)let y = Math.cos(0)let dig = Math.PI / 5 * 4for (let i = 0; i < 5; i++) { // 画五角星的五条边let x = Math.sin(i * dig)let y = Math.cos(i * dig)context.lineTo(x * radius, y * radius)// context.lineTo()}context.closePath()context.stroke()context.fill()context.restore()}}，
//方形印章createSealSquare（）{// // 获取画布let canvas = document.getElementById('canvas')let context = canvas.getContext('2d')let centerPoint = canvas.width / 2// 名称let personName = sealData.sealCompany || '李四'// 字体let fontFamily = 'Helvetica'// 颜色let color = this.isColor// 边框线宽度let personLineWidth = 4// 字体大小let personNameFontSize = 65// 字与边框的距离let lineTextGap = 0let leftTopPointX = 2.4 * (personNameFontSize + lineTextGap)let leftTopPointY = (personNameFontSize + lineTextGap)// 矩形宽高let wide = 2 * (personNameFontSize + lineTextGap)let high = 2 * (personNameFontSize + lineTextGap)// 字体加粗let fontWeight = 'bold'let textPoint = personNameFontSize / 2let length = personName.lengthif (length < 2 || length > 4) {alert('名称只能为2~4个字符！')throw new RangeError('名称只能为2~4个字符！')}if (typeof personName !== 'string') {alert('只能是字符串！')throw new TypeError('只能是字符串！')}switch (length) {case 2:personName += '之印'breakcase 3:personName += '印'break}context.save()context.fillStyle = colorcontext.textBaseline = 'middle'context.textAlign = 'center'context.font = 'normal normal bold ' + personNameFontSize + 'px ' + fontFamilycontext.translate(canvas.width / 2, canvas.width / 2)context.fillText(personName.charAt(0), textPoint, -textPoint)context.fillText(personName.charAt(1), textPoint, textPoint)context.fillText(personName.charAt(2), -textPoint, -textPoint)context.fillText(personName.charAt(3), -textPoint, textPoint)context.restore()// 绘制正方形context.fillStyle = colorcontext.strokeStyle = this.isColorcontext.lineWidth = 15context.rect(0.5 * (canvas.width - 166), 0.5 * (canvas.height - 166), 166, 166)context.stroke()}，//  (方形印)createSealSquareFinance (name) {let canvas = document.getElementById('canvas')let context = canvas.getContext('2d')// 绘制正方形context.lineWidth = 15context.strokeStyle = this.isColorcontext.strokeRect(0.5 * (canvas.width - 166), 0.5 * (canvas.height - 166), 166, 166)// 绘制文字context.fillStyle = this.isColorcontext.textBaseline = 'middle'context.textAlign = 'left'context.font = 'normal normal bold 25px Helvetica'context.translate(canvas.width / 2, canvas.width / 2)context.fillText('财', -60, -45)context.fillText('务', -60, -15)context.fillText('专', -60, 15)context.fillText('用', -60, 45)context.font = 'normal normal bold 16px Helvetica'context.translate(canvas.width / 2, canvas.width / 2)let count = name.length// 字数let y = -120let x = -90for (let i = 0; i < count; i++) {if (x === -90) {y = -120 + (i * 20)} else if (x === -70) {y = -120 + ((i - 5) * 20)} else if (x === -50) {y = -120 + ((i - 10) * 20)} else if (x === -30) {y = -120 + ((i - 15) * 20)}if (y === -20 && x === -90) { // 第一列的坐标y = -120x = -70} else if (y === -20 && x === -70) { // 第二列的坐标y = -120x = -50} else if (y === -20 && x === -50) { // 第三列的坐标y = -120x = -30}context.fillText(name[i], x, y)}},}

canvas制作印章相关推荐

[html] 使用canvas制作一个印章
[html] 使用canvas制作一个印章 <!DOCTYPE html> <html lang="en"> <head><meta ch ...
canvas制作圆型印章
通过canvas制作圆型印章,首先是上效果图,中间没有填充logo,自行填充就好了 <!DOCTYPE html> <html lang="en">< ...
html根据字段制作曲线图,canvas制作简单的HTML图表，折线或者矩形统计(原创)
插件描述:canvas制作简单的HTML图表,折线或者矩形统计使用canvas制作简单的HTML图表,折线或者矩形统计. 使用canvas制作简单的HTML图表,折线或者矩形统计,简单而实用.图形由 ...
计算机制作印章,制作印章软件【处理办法】
喜欢使用电脑的小伙伴们一般都会遇到win7系统制作印章软件的问题,突然遇到win7系统制作印章软件的问题就不知道该怎么办了,其实win7系统制作印章软件的解决方法非常简单,按照 1:"Ctr ...
[译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
html制作动态坐标轴,HTML5 canvas制作动态随机星图
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 本篇将会介绍如何用canvas制作动态随机移动的星图啦啦啦小白在远离小白道路上的第一步就是搭个博客前言这次的博文不 ...
Canvas制作的下雨动画
简介在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨: http://codepen.io/natewile ...
如何制作印章_如何用Photoshop制作个性印章/文字图片
带印章和文字的图片,不仅可以作为个人的标签,更能直接表达照片的意境,让片子与众不同. 那么,怎样才能给照片加印章和文字呢?或许方法有很多,甚至有多款App也可以直接做效果.但想要做出精细的效果,Pho ...
html制作状态栏数字时钟,html5 canvas制作15种数字时钟样式代码
特效描述:html5 canvas制作数字时钟样式.html5 canvas数字时钟代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 clockd1_={ "indic ...

canvas制作印章

canvas制作印章相关推荐

最新文章

热门文章