セット、スリーポイントデモ
原因：psツイルギンガムドローイングチュートリアルにつまずいた プレイドジェネレーターと呼ばれる特別なウェブバージョンをチェックしてください。、手動で格子縞を追加し、最終的に絵の形で提示することができます！
いくつかの情報を調べ、与えられたベースマップとマスクされたマップの基本的な効果をとりあえず実現しました。
cssマスキング
その核心は、css3のmask-imageを利用したもので、マスクイメージの黒い部分をカラーイメージに重ねて色を出し、白い部分にフィルターをかけています。これは横縞が処理されていると解釈できるのですが、織り成す感じをどう出すか。親要素と同じ幅と高さを設定し、最終的な効果を出すために縦縞の背景を追加しました：
.element {
width: 285px;
height: 363px;
overflow: hidden;
color: #fff;
background: url(../assets/img/ph.png);
mask-image: url(../assets/mask/mask1.png);
-webkit-mask-image: url(../assets/mask/mask.png);
}
canvas
キャンバスはキャンバスとして理解できますが、psとは異なりレイヤーという概念があり、修正が必要な場合は再描画する必要があります。
ここでは、キャンバスの globalCompositeOperation プロパティを変更することで、イメージのブレンド効果を実現しています。
直接高い模倣psのアイデアの冒頭では、ビューを取るcomponentisationにもっと資すると思いますが、また、いくつかの小さな落とし穴に遭遇したビュー+キャンバス
- vueドム要素の取得
domを直接操作する必要がないのがvueの良いところですが、だからといってdomを直接操作することを諦める必要はありません。 このようなcanvasを取得したら、refして、その後にスクリプトで thisを使用する必要があります。 ". ef.対応するdom ref値}$を指定します。
- スクリプト内のイメージ src への応答がありません。
- 直接htmlのimgの導入後、スクリプトでは、キャンバスに描画することが可能ですので、最初のステップは、onloadを通じて、描画操作では、イメージの読み込みが完了していることを確認するため、最初の考え、ブラウザのリソースの読み込みの問題
- 最初のステップを終えた後、うまくいかないことに気づき、 で解決策を見つけました。
drawcanvas() {
let canvas = this.$refs.canvas;
// コンテキストを取得する
this.context = canvas.getContext("2d");
canvas.width = this.canvasWidth;
canvas.height = this.canvasHeight;
// イメージを描画する
var img = new Image();
img.src = this.imgsrc;
var mask=new Image();
mask.src=this.masksrc;
setTimeout(() => {
this.context.clearRect(0, 0, canvas.width, canvas.height);
this.context.save();
// イメージを描画する
this.context.drawImage(img, 0, 0);
this.context.globalCompositeOperation = "destination-in";
this.context.drawImage(mask, 0, 0);
// this.context.fillStyle = "rgb(63,169,245)";
// this.context.arc(200, 200, 100, 0, Math.PI * 2, true);
// this.context.fill();
this.context.restore();
}, 10);
}
残された問題
棒グラフをリアルタイムで描画する際に、オーバーレイを実現するには？プロット結果のイメージ生成を検討しますか？
