Write string on canvas.

Developer
Kazuki Harada
Size
3,317 Kb
Views
10,120
  1. Write string on canvas. Previews
  2. Write string on canvas. HTML Codes
  3. Write string on canvas. CSS Codes
  4. Write string on canvas. JS Codes

How do I make an write string on canvas.?

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

Write string on canvas. Previews
IQ Test

Write string on canvas. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>write string 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>帳票定義リストを作成する</h2> <form class="form-horizontal" name="sampleForm" novalidate> <div class="row form-group"> <div class="col-xs-3"> <input type="text" placeholder="property" class="form-control" ng-model="propName"> </div> <div class="col-xs-6"> <input type="text" placeholder="value" class="form-control" ng-model="propValue"> </div> <div class="col-xs-3"> <input type="button" class="form-control btn btn-primary" value="設定" ng-click="set()"> </div> </div> <div class="row form-group"> <div class="col-xs-9"><p><pre>{{lineModel | json}}</pre></p></div> <div class="col-xs-3"> <input type="button" class="form-control btn btn-primary" value="追加" ng-click="add()"> </div> </div> </form> <p><pre>{{confList | json}}</pre></p> <h2>出力パラメータモデルを作成する</h2> <form class="form-horizontal" name="sampleForm" novalidate> <div class="row form-group"> <div class="col-xs-3"> <input type="text" placeholder="parameter" class="form-control" ng-model="paramName"> </div> <div class="col-xs-6"> <input type="text" placeholder="value" class="form-control" ng-model="paramValue"> </div> <div class="col-xs-3"> <input type="button" class="form-control btn btn-primary" value="設定" ng-click="setParameter()"> </div> </div> </form> <p><pre>{{parameterModel | json}}</pre></p> <pre> 作成日 {{parameterModel.createDay | date: 'yyyy年M月d日 H時m分s秒'}} 更新日 {{parameterModel.updateDay | date: 'yyyy/MM/dd HH:mm:ss'}} 本日の結果 住所 {{parameterModel.address}} 名前 {{parameterModel.userName}} </pre> <h2>文字をキャンバスに描く</h2> <canvas width="1180" height="500" id="canvas" class="draw-block" draw-report></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"> </div> <div class="col-xs-3"> <input type="number" placeholder="line spacing" class="form-control" ng-model="lineSpacing"> </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'} ]" ng-options="align.value as align.name for align in alignList"> </select> </div> <div class="col-xs-3"> </div> </div> <div class="row form-group"> <div class="col-xs-9"> <input type="text" placeholder="value" class="form-control" ng-model="textValue"> </div> <div class="col-xs-3"> <input type="button" class="form-control btn btn-primary" value="書き出し" ng-click="writeTextForCanvas(textValue, fontSize, lineSpacing, textAlign)"> </div> </div> </form> </div> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Write string 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 string on canvas. - Script Codes JS Codes

var app = angular.module('app', []);
app.controller('sampleController', function ($scope, $log, $compile) { $scope.confList = []; $scope.set = function(){ if(!$scope.lineModel){ $scope.lineModel = new Object(); } $scope.lineModel[$scope.propName] = $scope.propValue; }; $scope.add = function(){ if($scope.lineModel){ $scope.confList.push($scope.lineModel); delete $scope.lineModel; } }; $scope.setParameter = function(){ if(!$scope.parameterModel){ $scope.parameterModel = new Object(); $scope.parameterModel.today = new Date(); } $scope.parameterModel[$scope.paramName] = $scope.paramValue; };
});
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'); ctx.lineCap = "round"; ctx.lineJoin = "round"; ctx.strokeStyle = "#000"; ctx.fillStyle = "#000"; ctx.lineWidth = 6; ctx.textBaseline = 'top'; ctx.font = "30px 'ＭＳ ゴシック'"; var currentPos = 10; scope.writeTextForCanvas = function(text, fontsz, linesz, textAlign){ console.log("write... " + text); ctx.save(); ctx.font = fontsz + "px 'ＭＳ ゴシック'"; ctx.textAlign = textAlign; if(textAlign == 'left'){ ctx.fillText(text, 10, currentPos); }else if(textAlign == 'center'){ ctx.fillText(text, Math.round(width / 2), currentPos); }else if(textAlign == 'right'){ ctx.fillText(text, width-10, currentPos); } currentPos = currentPos + fontsz + linesz; ctx.restore(); }; } };
});
Write string on canvas. - Script Codes
Write string on canvas. - Script Codes
Home Page Home
Developer Kazuki Harada
Username kazux
Uploaded December 09, 2022
Rating 3
Size 3,317 Kb
Views 10,120
Do you need developer help for Write string 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
Write char on canvas.
Infinite-scroll list
AngularJS Validate Test
Flip switch on angular
Format text at blur
Canvas with AngularJS
Datepicker
Create amazing Facebook ads 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!