USDT走分システム開発
3915 ワード
canvasの常用機能、USDT走分システム開発(T:I 8 O-285 I-O 282 V林)前言:
canvasは単独でフロントエンドの大きな知識モジュールと言えるので、今日検討します.
まず前文の敷物を作ります.
①canvasの作成
②canvasの取得
③常用様式
④線を引く
ctx.stroke();//線を描く⑤塗りつぶし
ctx.fillStyle = "yellow";//塗りつぶし色ctx.fill();//充填を行う⑥終了を開始する
⑦その他
本文:
いくら言っても無駄で、結局実戦を行い、ついに本文に入った.
HTMLセクション
css部分
*{ padding: 0; margin: 0;}.wrapper{ margin: 15px;}.wrapper canvas{ border:1px solid #000; border-radius: 25px; box-shadow:10px 10px 5px #999; margin-bottom: 20px;}.wrapper ul{ width: 1000px; text-align: center;}.wrapper ul li{ display: inline-block; margin-left: 40px;}.wrapper ul li input{ display: block; background: #ddd; color: #000; border-radius: 25px; border:none; padding: 10px 20px; font-size: 15px; transition-duration: 0.2s;}.wrapper ul li input:hover{ background: #999; border: 1px solid #f00; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.3);}js部分
function ID(str) { return document.getElementById(str);}
var darwingLineObj={cavs:this.ID("canvas")、color:this.ID("color")、clear:this.ID("clear")、eraser:this.ID("eraser")、rescind:this.ID("rescind")、weight:this.ID("weight")、bool:false、arrImg:[]、//初期化init:function(){
}, draw:function(){
}//draw end
}
darwingLineObj.init();
canvasは単独でフロントエンドの大きな知識モジュールと言えるので、今日検討します.
まず前文の敷物を作ります.
①canvasの作成
②canvasの取得
var cavs = document.getElementById("cavs"); // canvas
var ctx = cavs.getContext("2d"); // 2d
ctx.moveTo(100, 100); //
ctx.lineTo(200, 200); //
③常用様式
ctx.strokeStyle = "#f00" // 2
ctx.lineWidth = 10; //
④線を引く
ctx.stroke();//線を描く⑤塗りつぶし
ctx.fillStyle = "yellow";//塗りつぶし色ctx.fill();//充填を行う⑥終了を開始する
ctx.beginPath(); //
ctx.closePath(); //
⑦その他
var img = ctx.getImageData(x, y, width, height); // canvas
ctx.putImageData(img, width, height) // img canvas
ctx.clearRect(x,y,canvas.width,canvas.height) //
本文:
いくら言っても無駄で、結局実戦を行い、ついに本文に入った.
HTMLセクション
css部分
*{ padding: 0; margin: 0;}.wrapper{ margin: 15px;}.wrapper canvas{ border:1px solid #000; border-radius: 25px; box-shadow:10px 10px 5px #999; margin-bottom: 20px;}.wrapper ul{ width: 1000px; text-align: center;}.wrapper ul li{ display: inline-block; margin-left: 40px;}.wrapper ul li input{ display: block; background: #ddd; color: #000; border-radius: 25px; border:none; padding: 10px 20px; font-size: 15px; transition-duration: 0.2s;}.wrapper ul li input:hover{ background: #999; border: 1px solid #f00; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.3);}js部分
function ID(str) { return document.getElementById(str);}
var darwingLineObj={cavs:this.ID("canvas")、color:this.ID("color")、clear:this.ID("clear")、eraser:this.ID("eraser")、rescind:this.ID("rescind")、weight:this.ID("weight")、bool:false、arrImg:[]、//初期化init:function(){
this.draw();
}, draw:function(){
var cavs = this.cavs,
self = this,
ctx = cavs.getContext("2d");
ctx.lineWidth = 15;
ctx.lineCap = "round"; //
ctx.lineJoin = "round"; //
var c_x = cavs.offsetLeft, //
c_y = cavs.offsetTop; //canvas
cavs.onmousedown = function(e){
e = e || window.event;
self.bool = true;
var m_x = e.pageX - c_x;
var m_y = e.pageY - c_y;
ctx.beginPath();
ctx.moveTo(m_x,m_y); //
var imgData = ctx.getImageData(0, 0, cavs.width, cavs.height); //
self.arrImg.push(imgData);
}
cavs.onmousemove = function(e){
if(self.bool){
ctx.lineTo(e.pageX-c_x, e.pageY-c_y);
ctx.stroke();
}
}
cavs.onmouseup = function(e){
self.bool = false;
ctx.closePath();
}
self.color.onchange = function(e){ //
e = e || window.event;
//console.log(e.target.value)
ctx.strokeStyle = e.target.value;
}
self.clear.onclick = function(){
ctx.clearRect(0,0,cavs.width,cavs.height)
}
self.eraser.onclick = function(){
ctx.strokeStyle = "#fff";
}
self.rescind.onclick = function(){ //
if (self.arrImg.length>0) {
ctx.putImageData(self.arrImg.pop(),0,0)
}
}
self.weight.onchange = function(e){ //
//console.log(e.target.value)
ctx.lineWidth = e.target.value;
}
}//draw end
}
darwingLineObj.init();