国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

canvas線條的屬性解析

來源:懂視網 責編:小OO 時間:2020-11-27 18:48:45
文檔

canvas線條的屬性解析

一、線條的帽子lineCap。取值:butt(默認值),round圓頭,square方頭。,var canvas=document.getElementById(";canvas";);canvas.width=800;canvas.height=800;var context=canvas.getContext(";2d";);context.lineWidth=40;context.strokeStyle=";#005588";//三個beginpath()畫了3條平行線context.beginPath();context.moveTo(100,200);context.lineTo(700。
推薦度:
導讀一、線條的帽子lineCap。取值:butt(默認值),round圓頭,square方頭。,var canvas=document.getElementById(";canvas";);canvas.width=800;canvas.height=800;var context=canvas.getContext(";2d";);context.lineWidth=40;context.strokeStyle=";#005588";//三個beginpath()畫了3條平行線context.beginPath();context.moveTo(100,200);context.lineTo(700。
本文主要和大家介紹了canvas線條的屬性詳解的相關資料,小編覺得挺不錯的,現在分享給大家,希望能幫助到大家。

一、線條的帽子lineCap

取值:butt(默認值),round圓頭,square方頭

var canvas=document.getElementById("canvas");

canvas.width=800;
canvas.height=800;

var context=canvas.getContext("2d");

context.lineWidth=40;
context.strokeStyle="#005588";

//三個beginpath()畫了3條平行線
context.beginPath();
context.moveTo(100,200);
context.lineTo(700,200);
context.lineCap="butt";
context.stroke();

context.beginPath();
context.moveTo(100,400);
context.lineTo(700,400);
context.lineCap="round";
context.stroke();

context.beginPath();
context.moveTo(100,600);
context.lineTo(700,600);
context.lineCap="square";
context.stroke();

//baseline
context.lineWidth=1;
context.strokeStyle="#27a";
context.moveTo(100,100);
context.lineTo(100,700);
context.moveTo(700,100);
context.lineTo(700,700);
context.stroke();

round做動畫的時候需要圓角可以直接畫,lineCap的效果只能用于線段的開始處和結尾處,不能用于連接處。

lineCap="square"可以用來在線段閉合時候完全閉合,但是還是推薦使用clothPath()閉合。

var canvas=document.getElementById("canvas");

canvas.width=800;
canvas.height=800;

var context=canvas.getContext("2d");

context.beginPath();
context.moveTo(100, 350);
context.lineTo(500,350);
context.lineTo(500,200);
context.lineTo(700,400);
context.lineTo(500,600);
context.lineTo(500,450);
context.lineTo(100,450);
context.lineTo(100,350);
// context.closePath(); //推薦

context.lineWidth=10;
context.lineCap="square"; //不推薦
context.fillStyle="yellow";
context.strokeStyle="#058"

context.fill();
context.stroke();

二、畫一個五角星,說明線條其它狀態屬性

圓上的五個角平分360°,每個角72°,90°-72°=18°

小圓上的角平分72°,18°+36°=54°

角度轉弧度——弧度=角度*π/180 即(18+i*72)*Math.PI/180

var canvas=document.getElementById("canvas");

canvas.width=800;
canvas.height=800;

var context=canvas.getContext("2d");
context.beginPath();
//角度轉弧度:除以180*PI
for(var i=0;i<5;i++){
 context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400,
 -Math.sin((18+i*72)/180*Math.PI)*300+400);
 context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400,
 -Math.sin((54+i*72)/180*Math.PI)*150+400);
}

context.closePath();

context.lineWidth=10;
context.stroke();

封裝成函數:

window.onload=function(){
 var canvas=document.getElementById("canvas");

 canvas.width=800;
 canvas.height=800;

 var context=canvas.getContext("2d");
 context.lineWidth=10;
 drawStar(context,150,300,400,400)
} 

function drawStar(ctx,r,R,x,y,){
 ctx.beginPath();
 //角度轉弧度:除以180*PI
 for(var i=0;i<5;i++){
 ctx.lineTo(Math.cos((18+i*72)/180*Math.PI)*R+x,
 -Math.sin((18+i*72)/180*Math.PI)*R+y);
 ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x,
 -Math.sin((54+i*72)/180*Math.PI)*r+y);
 }

 ctx.closePath();
 ctx.stroke();
}

分別修改小r=80,200,400得到下面圖形

增加一個順時針旋轉的參數:rot

window.onload=function(){
 var canvas=document.getElementById("canvas");

 canvas.width=800;
 canvas.height=800;

 var context=canvas.getContext("2d");
 context.lineWidth=10;
 drawStar(context,150,300,400,400,30);
} 




//rot順時針旋轉的角度
function drawStar(ctx,r,R,x,y,rot){
 ctx.beginPath();
 //角度轉弧度:除以180*PI
 for(var i=0;i<5;i++){
 ctx.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
 -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
 ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
 -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
 }

 ctx.closePath();
 ctx.stroke();
}

旋轉30度的效果如下:

三、線條的連接lineJoin和miterLimit

1、lineJoin取值

miter(default)永遠呈現一個尖角,bevel斜接,round圓角

bevel像彩帶折下來的效果。

2、miter相關miterLimit的屬性

設置小r為30,lineJoin為miter,效果如下:角沒有延伸成尖角,而是采取bevel的方式來顯示。

context.lineJoin="miter";
drawStar(context,30,300,400,400,30);

為什么?

因為context.miterLimit=10默認值是10,

miterlimit只有當lineJoin為miter時才會有效。

miterLimit指的是,當使用miter作為線條和線條相接的方式時,所 產生的內角和外角的距離的最大值 。

默認值是10就代表最大值是10px,一旦超過來10px就會使用bevel的方式顯示。

上面把內圓半徑r設置為30時,形成的尖角非常尖,內角和外角的距離超過來miterLimit的10,

現在把miterlimit改大點,改成20,效果如下:

context.lineJoin="miter";
 context.miterLimit=20;
 drawStar(context,30,300,400,400,30);

注意:miterLimit并不是從白色尖尖到黑色尖尖的距離,這個距離遠遠大于20px。

當產生miterLimit時一定是線條有寬度的,有寬度的線條中間的線的尖角與外邊尖角直接的距離。

canvas給出一個miterLimit的經驗值10。只有在極其特別的情況下,需要表現非常尖銳的角的時候才需要修改miterLimit。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

canvas線條的屬性解析

一、線條的帽子lineCap。取值:butt(默認值),round圓頭,square方頭。,var canvas=document.getElementById(";canvas";);canvas.width=800;canvas.height=800;var context=canvas.getContext(";2d";);context.lineWidth=40;context.strokeStyle=";#005588";//三個beginpath()畫了3條平行線context.beginPath();context.moveTo(100,200);context.lineTo(700。
推薦度:
標簽: 詳解 線條 線段的
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 欧美一区二区在线播放 | 国产在线精品一区二区三区 | 欧美高清第一页 | 亚洲成人一区二区 | 亚洲国产精品婷婷久久 | 久久青青视频 | 欧美高清一区二区 | 国产成人精品曰本亚洲 | 国产伦精品一区二区三区网站 | 亚洲最新视频在线观看 | 欧美aa在线观看 | 在线中文高清资源免费观看 | 一本色道久久88综合亚洲精品高清 | 一区二区三区四区视频 | 欧美一区二区三区在线播放 | 91中文字幕网 | 国产午夜在线观看 | 国产欧美日韩一区二区三区 | 国产一区视频在线 | 亚洲欧美精选 | 一区二区三区中文字幕 | 日韩欧美亚洲国产高清在线 | 精品久久久久久国产牛牛app | 欧美日韩国 | 综合网天天 | 国产国产成人精品久久 | 最新国产在线播放 | 国产高清精品一区 | 国产高清a毛片在线看 | 手机看片日韩欧美 | 久久久久久久久国产 | 久久精品99久久香蕉国产色戒 | 久久久久久久岛国免费播放 | 在线观看亚洲一区二区 | 欧美第1页 | 日韩欧美精品在线观看 | 黄色一级视频免费看 | 欧美一区二区视频 | 免费看黄视频网站 | 亚洲欧美网站 | 亚洲另类第一页 |