JavaScript+html5 캔버스 그리기 그라데이션 Area_javascript 기술의 전체 예-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript+html5 캔버스 그리기 그라데이션 Area_javascript 기술의 전체 예

May 16, 2016 pm 03:17 PM

canvas html5 javascript 그리다

본 글의 예시에서는 JavaScript+html5 캔버스를 사용하여 그라데이션 영역을 그리는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

런닝 효과 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;demo&lt;/title&gt;
  &lt;style type="text/css"&gt;
   #canvas {
    border:3px solid gray;
   }
  &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;canvas id="canvas" width="500px" height="500px"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
 &lt;script type="text/javascript"&gt;
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.rect(0, 0, 200, 200);
  ctx.closePath();
  var gradient = ctx.createLinearGradient(0, 0, 200, 200);
  gradient.addColorStop(0, "gray");
  gradient.addColorStop(0.5, "red");
  gradient.addColorStop(1, "blue");
  ctx.fillStyle = gradient;
  ctx.fill();
 &lt;/script&gt;
&lt;/html&gt;

로그인 후 복사

js 특수 효과와 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "jQuery 애니메이션 및 특수 효과 사용 요약" 및 "일반적인 클래식 요약"을 확인할 수 있습니다. jQuery의 특수 효과"

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.