> 웹 프론트엔드 > H5 튜토리얼 > HTML5 캔버스 기본 그리기 텍스트 렌더링

HTML5 캔버스 기본 그리기 텍스트 렌더링

黄舟
풀어 주다: 2018-05-29 11:09:39
원래의
2840명이 탐색했습니다.

텍스트 렌더링과 관련된 속성은 크게 3가지와 메소드 3가지가 있습니다.

HTML5 캔버스 기본 그리기 텍스트 렌더링
위 속성과 메소드의 기본 사용법은 다음과 같습니다.

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

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

      

        context.font="bold 30px Arial"; //设置样式   

        context.strokeStyle = "#1712F4";   

        context.strokeText("欢迎来到我的博客!",30,100);   

      

        context.font="bold 50px Arial";    

        var grd = context.createLinearGradient( 30 , 200, 400 , 300 );//设置渐变填充样式   

        grd.addColorStop(0,"#1EF9F7");   

        grd.addColorStop(0.25,"#FC0F31");   

        grd.addColorStop(0.5,"#ECF811");   

        grd.addColorStop(0.75,"#2F0AF1");   

        grd.addColorStop(1,"#160303");   

        context.fillStyle = grd;   

        context.fillText("欢迎来到我的博客!",30,200);   

      

        context.save();   

        context.moveTo(200,280);   

        context.lineTo(200,420);   

        context.stroke();   

        context.font="bold 20px Arial";    

        context.fillStyle = "#F80707";   

        context.textAlign="left";   

        context.fillText("文本在指定的位置开始",200,300);   

        context.textAlign="center";   

        context.fillText("文本的中心被放置在指定的位置",200,350);   

        context.textAlign="right";   

        context.fillText("文本在指定的位置结束",200,400);   

        context.restore();   

      

        context.save();   

        context.moveTo(10,500);   

        context.lineTo(500,500);   

        context.stroke();   

        context.fillStyle="#F60D0D";   

        context.font="bold 20px Arial";    

        context.textBaseline="top";   

        context.fillText("指定位置在上面",10,500);   

        context.textBaseline="bottom";   

        context.fillText("指定位置在下面",150,500);   

        context.textBaseline="middle";   

        context.fillText("指定位置居中",300,500);   

        context.restore();   

      

      

        context.font="bold 40px Arial";    

        context.strokeStyle = "#16F643";   

        var text = "欢迎来到我的博客!";   

        context.strokeText("欢迎来到我的博客!",10,600);   

        context.strokeText("上面字符串的宽度为:"+context.measureText(text).width,10,650);
로그인 후 복사

Effect 다음과 같습니다.
HTML5 캔버스 기본 그리기 텍스트 렌더링

위는 HTML5 Canvas 기본 작화의 텍스트 렌더링 내용입니다. 자세한 내용은 PHP 중국어 홈페이지를 참고해주세요. (m.sbmmt.com)!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿