简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > H5 튜토리얼 > 본문

HTML5 튜토리얼 그리기 직사각형 코드 공유

高洛峰
풀어 주다： 2017-03-12 16:50:07
원래의
2127명이 탐색했습니다.

html5는 다양한 모양을 그릴 수 있습니다. 아래는 직사각형을 그리는 코드입니다.

코드는 다음과 같습니다.

<!DOCTYPE html><head> 
<meta charset=utf-8> 
<title>HTML5画矩形</title>
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://www.php.cn/"></script</a>>
</head> 
<script>
$(document).ready(function(){
var c=document.getElementById("drawbox");
var draw=c.getContext("2d");        //获取2d内容的引用，调用绘图API
draw.fillStyle="#ff0000";            //方式一指定填充颜色
draw.fillRect(0,0,300,100);            //坐标和长宽
draw.fillStyle="rgba(0,0,255,0.5)";    //方式二rgb+透明度
draw.fillRect(400,0,100,100);        //坐标和长宽
})
</script>
</body>
<canvas id="drawbox" width="500" height="500"></canvas>
</body> 
</html>
로그인 후 복사



효과그림

HTML5 튜토리얼 그리기 직사각형 코드 공유

위 내용은 HTML5 튜토리얼 그리기 직사각형 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
html5教程 画矩形
원천：php.cn
이전 기사：Html5web 로컬 스토리지 인스턴스 세부정보 다음 기사：html5 시계 구현 사용 방법(코드 포함)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
swift - iOS绘制界面都是图形操作的界面？ 我原来是做web前端的，最近公司有需求，在学iOS开发，看了些教程，都是用storyboard来画的，请问有用代码画的吗？ 用图形画比用代码画要好吗？主要考虑到屏幕适配问题，用代码...
에서 2017-04-17 17:39:13
0
3
326
python - 如何画好一个框架设计图. 做开发有1年多了，一直没画过框架图，今天第一次画，百度上面照猫画虎搞了一套。发出来给大家看看。那里画的不对给指导下。或者推荐点这方面的教程资料。 结构图形地址https://www...
에서 2017-04-17 17:24:14
0
2
244
baidu-地图 - 请教一个问题， 百度地图的javascript api 能否用触摸方式动态画一个圆或者矩形？ 如题，请教下解决思路。
에서 2017-04-10 15:33:56
0
3
394
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！