Write char on canvas.

Developer
Kazuki Harada
Size
3,802 Kb
Views
8,096
  1. Write char on canvas. Previews
  2. Write char on canvas. HTML Codes
  3. Write char on canvas. CSS Codes
  4. Write char on canvas. JS Codes

How do I make an write char on canvas.?

What is a write char on canvas.? How do you make a write char on canvas.? This script and codes were developed by Kazuki Harada on 09 December 2022, Friday.

Write char on canvas. Previews
IQ Test

Write char on canvas. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>write char on canvas.</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html ng-app="app"> <head> <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </script> </head> <body> <div class="container" ng-controller="sampleController"> <h2>Canvasに文字を書き出す</h2> <canvas width="1180" height="500" id="canvas" class="draw-block" draw-report dr-top-margin="20" dr-side-margin="20" dr-font="ＭＳ ゴシック" dr-def-font-style="#a0a0a0" dr-def-stroke-style="#a0a0a0" dr-def-line-width="0.5"></canvas>
　　　<form class="form-horizontal" name="sampleForm" novalidate> <div class="row form-group"> <div class="col-xs-3"> <input type="number" placeholder="font size" class="form-control" ng-model="fontSize" ng-init="fontSize=20"> </div> <div class="col-xs-3"> <input type="number" placeholder="line spacing" class="form-control" ng-model="lineSpacing" ng-init="lineSpacing=5"> </div> <div class="col-xs-3"> <select class="form-control" ng-model="textAlign" ng-init="alignList=[{name: '左寄せ', value: 'left'}, {name: '中央', value: 'center'}, {name: '右寄せ', value: 'right'} ]; textAlign='left'" ng-options="align.value as align.name for align in alignList" > </select> </div> <div class="col-xs-3"> <input type="number" placeholder="start pos." class="form-control" ng-model="startPos" ng-init="startPos=0" ng-disabled="textAlign==='center'"> </div> </div> <div class="row form-group"> <div class="col-xs-1"></div> <div class="col-xs-1 checkbox"> <label> <input type="checkbox" ng-model="textBold">太字 </label> </div> <div class="col-xs-1 checkbox"> <label> <input type="checkbox" ng-model="textUnderLine">下線 </label> </div> <div class="col-xs-3"> <input type="number" placeholder="line size" class="form-control" ng-model="underLineSize" ng-init="underLineSize=null" ng-disabled="!textUnderLine"> </div> <div class="col-xs-3"> <input type="text" placeholder="line color" class="form-control" ng-model="underLineColor" ng-init="underLineColor=null" ng-disabled="!textUnderLine"> </div> <div class="col-xs-3"> <input type="text" placeholder="font color" class="form-control" ng-model="fontColor" ng-init="fontColor=null"> </div> </div> <div class="row form-group"> <div class="col-xs-12"> <input type="text" placeholder="value" class="form-control" ng-model="textValue"> </div> </div> <div class="row form-group"> <div class="col-xs-6"> <input type="button" class="form-control btn btn-block" value="クリア" ng-click="clearTextForCanvas()"> </div> <div class="col-xs-6"> <input type="button" class="form-control btn btn-block btn-primary" value="書き出し" ng-click="putTextDataForCanvas(textValue, fontSize, lineSpacing, textAlign, startPos, textBold, fontColor, textUnderLine, underLineSize, underLineColor)"> </div> </div> </form> </div> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Write char on canvas. - Script Codes CSS Codes

.draw-block{ border-bottom: 1px solid rgba(0,0,0,0.3); background-color: #FFF; box-shadow: 0 9px 20px -5px rgba(0,0,0,0.8); margin-left : auto ; margin-right : auto ; display: block;
}

Write char on canvas. - Script Codes JS Codes

var app = angular.module('app', []);
app.controller('sampleController', function ($scope, $log, $compile) {
});
app.directive("drawReport", function(){ return { restrict: "A", link: function(scope, element, attrs){ var canvas = element[0]; var width = canvas.width; var ctx = canvas.getContext('2d'); var fontSuffix = "px 'ＭＳ ゴシック'"; if(attrs.drFont){ fontSuffix = "px \'" + attrs.drFont + "\'"; } var topMargin = 10; if(attrs.drTopMargin){ topMargin = parseFloat(attrs.drTopMargin); } var sideMargin = 10; if(attrs.drSideMargin){ sideMargin = parseFloat(attrs.drSideMargin); } ctx.lineCap = "square"; ctx.lineJoin = "round"; if(attrs.drDefFontStyle){ ctx.fillStyle = attrs.drDefFontStyle; }else{ ctx.fillStyle = "#000"; } if(attrs.drDefStrokeStyle){ ctx.strokeStyle = attrs.drDefStrokeStyle; }else{ ctx.strokeStyle = "#000"; } if(attrs.drDefLineWidth){ ctx.lineWidth = parseFloat(attrs.drDefLineWidth); }else{ ctx.lineWidth = 1; } ctx.textBaseline = 'top'; ctx.font = "30" + fontSuffix; var currentPos = topMargin; var textDataList = []; scope.writeTextForCanvas = function(textData){ currentPos += textData.linespacing; console.log("write: " + textData.textAlign + " " + currentPos + ":" + textData.text); ctx.save(); ctx.textAlign = textData.textAlign; if(textData.bold){ ctx.font = 'bold ' + textData.fontsz + fontSuffix; }else{ ctx.font = textData.fontsz + fontSuffix; } if(textData.fontColor){ ctx.fillStyle = textData.fontColor; } if(textData.textAlign === 'left'){ ctx.fillText(textData.text, sideMargin + textData.start, currentPos); }else if(textData.textAlign === 'center'){ ctx.fillText(textData.text, Math.round(width / 2), currentPos); }else if(textData.textAlign === 'right'){ ctx.fillText(textData.text, width-sideMargin-textData.start, currentPos); } if(textData.underLine) { var txw = ctx.measureText(textData.text); if(textData.lineColor){ ctx.strokeStyle = textData.lineColor; } if(textData.lineSize){ ctx.lineWidth = textData.lineSize; } currentPos = currentPos + textData.fontsz + 1; if(textData.textAlign === 'left'){ ctx.beginPath(); ctx.moveTo(sideMargin + textData.start, currentPos); ctx.lineTo(txw.width + sideMargin, currentPos); ctx.stroke(); }else if(textData.textAlign === 'center'){ ctx.beginPath(); ctx.moveTo(width/2 - txw.width/2, currentPos); ctx.lineTo(width/2 + txw.width/2, currentPos); ctx.stroke(); }else if(textAlign === 'right'){ ctx.beginPath(); ctx.moveTo(width - sideMargin, currentPos); ctx.lineTo(width - txw.width - sideMargin - textData.start, currentPos); ctx.stroke(); } }else{ currentPos = currentPos + textData.fontsz; } ctx.restore(); }; /* scope.writeTextForCanvas = function(text, fontsz, linespacing, textAlign, bold, underLine){ currentPos += linespacing; console.log("write: " + textAlign + " " + currentPos + ":" + text); ctx.save(); ctx.textAlign = textAlign; if(bold){ ctx.font = 'bold ' + fontsz + fontSuffix; }else{ ctx.font = fontsz + fontSuffix; } if(textAlign === 'left'){ ctx.fillText(text, sideMargin, currentPos); }else if(textAlign === 'center'){ ctx.fillText(text, Math.round(width / 2), currentPos); }else if(textAlign === 'right'){ ctx.fillText(text, width-sideMargin, currentPos); } if(underLine) { var txw = ctx.measureText(text); currentPos = currentPos + fontsz + 1; if(textAlign === 'left'){ ctx.beginPath(); ctx.moveTo(sideMargin, currentPos); ctx.lineTo(txw.width + sideMargin, currentPos); ctx.stroke(); }else if(textAlign === 'center'){ ctx.beginPath(); ctx.moveTo(width/2 - txw.width/2, currentPos); ctx.lineTo(width/2 + txw.width/2, currentPos); ctx.stroke(); }else if(textAlign === 'right'){ ctx.beginPath(); ctx.moveTo(width - sideMargin, currentPos); ctx.lineTo(width - txw.width - sideMargin, currentPos); ctx.stroke(); } }else{ currentPos = currentPos + fontsz; } ctx.restore(); }; */ scope.putTextDataForCanvas = function( text, fontsz, linespacing, textAlign, start, bold, fontColor, underLine, lineSize, lineColor){ var textData = { dataType: 2, text: text, fontsz: fontsz, linespacing: linespacing, textAlign: textAlign, start: start, bold: bold, fontColor: fontColor, underLine: underLine, lineSize: lineSize, lineColor: lineColor }; textDataList.push(textData); scope.writeTextForCanvas(textData); }; scope.clearTextForCanvas = function(){ console.log("clear..."); ctx.clearRect(0, 0, canvas.width, canvas.height); currentPos = topMargin; }; } };
});
Write char on canvas. - Script Codes
Write char on canvas. - Script Codes
Home Page Home
Developer Kazuki Harada
Username kazux
Uploaded December 09, 2022
Rating 3
Size 3,802 Kb
Views 8,096
Do you need developer help for Write char on canvas.?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kazuki Harada (kazux) Script Codes
Name
A Pen by Kazuki Harada
Infinite-scroll list
Flip switch on angular
Format text at blur
Write string on canvas.
Datepicker
Canvas with AngularJS
AngularJS Validate Test
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!