<!--head-->
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico">
<title>图åƒå¤§å°</title>
<meta name="keywords" content="图åƒ,大å°,宽高,图åƒå±žæ€§" />
<meta name="description" content="图åƒ_图åƒå¤§å°_图åƒ,大å°,宽高,图åƒå±žæ€§" />
<link rel="stylesheet" type="text/css" href="/source/public/vue/css/main_blog.css" />
<link rel="stylesheet" href="http://www.yunxi10.com/source/public/js/default.min.css" />
<script src="http://www.yunxi10.com/source/public/js/highlight.min.js"></script>
<script src="http://www.yunxi10.com/source/public/js/highlightjs-line-numbers.min.js"></script>
<script src="/source/public/js/jquery.min.js"></script>
<script src="/source/public/js/jquery.lazyload.js"></script>
<script src="/source/public/js/service/http.js" type="text/javascript"></script>
<script src="/source/public/js/function/swint.js" type="text/javascript"></script>
<script src="/source/public/js/function/builtin.js" type="text/javascript"></script>
<script src="/source/public/js/function/mongodb.common.js" type="text/javascript"></script>
<script src="/admincms/public/js/mongodb.js" type="text/javascript"></script>
<script src="/source/plugin/slide/slide.js" type="text/javascript"></script> </head>
<body><script src="/source/public/js/blog.js" type="text/javascript"></script>
<header class="header fixed" style="top: 0" >
<div class="head-wrap plr25">
<!-- LOGO -->
<div class="header-left logo" style="width: 125px !important">
<h1 class="nobold">
<a href="/" title="åšå®¢ç½‘" class="align_left font24">
<i class="iconfont icon-blog-1 font24 cl-red"></i>
åšå®¢ç½‘
</a>
</h1>
</div>
<!-- 导航æ -->
<div class="header-content w600 left">
</div>
<div class="font14 right" style="padding-top: 25px; width: 220px">
<!-- 站内æœç´¢ -->
<div class="plr10" style="background: #f7f8fa; display: flex; border-radius: 30px">
<input
id="search-input"
type="text"
value=""
style="background: none; border: none; width: 100%; height: 36px"
placeholder="输入关键è¯æœç´¢"
autocomplete="off"
class="keywords"
style="flex: 1"
/><i id="search-btn" class="iconfont icon-search font20 cl-ccc" style="margin-top: 8px;"></i>
</div> </div>
<!-- 登录 -->
<div
class="member-login header-right blog-login align_right"
style="width: 220px"
></div>
</div>
</header><script src="/html/demo/js/public.js"></script>
<!--main-->
<div class="container" style=" position: fixed;
width: 100%;
top: 100px;
bottom: 0;" style="margin-top: 120px;">
<div class="contains-wrap flex" style=" height: 100%;">
<div class="bg-white mr15 demo-sidebar" style=" border-radius: 4px; margin-right:15px; width: 200px;">
<div class="art-sidebar code-sidebar sidebar_fixed">
<div class="p10 bold"><i class="iconfont icon-dot"></i> HTML5画布</div>
<ul class="aside-wrap plr10">
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="html5.html" class="block">
画布元ç´
</a>
</li>
</ul>
<div class="p10 bold"><i class="iconfont icon-dot"></i> 线</div>
<ul class="aside-wrap plr10">
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="line.html" class="block">
线
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="lineWidth.html" class="block">
线æ¡å®½åº¦
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="lineColor.html" class="block">
线æ¡é¢œè‰²
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="lineCap.html" class="block">
线帽
</a>
</li>
</ul>
<div class="p10 bold"><i class="iconfont icon-dot"></i> 曲线</div>
<ul class="aside-wrap plr10">
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="arc.html" class="block">
弧
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="quadraticCurve.html" class="block">
二次曲线
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="bezierCurve.html" class="block">
è´å¡žå°”曲线
</a>
</li>
</ul>
<div class="p10 bold"><i class="iconfont icon-dot"></i> 路径</div>
<ul class="aside-wrap plr10">
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="Path.html" class="block">
路径
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="lineJoin.html" class="block">
线æ¡è¿žæŽ¥
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="roundedCorners.html" class="block">
圆角
</a>
</li>
</ul>
<div class="p10 bold"><i class="iconfont icon-dot"></i> 形状</div>
<ul class="aside-wrap plr10">
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="customShape.html" class="block">
自定义形状
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="Rectangle.html" class="block">
长方形
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="Circle.html" class="block">
圆圈
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="Semicircle.html" class="block">
åŠåœ†
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="oval.html" class="block">
æ¤åœ†å½¢
</a>
</li>
</ul>
<div class="p10 bold"><i class="iconfont icon-dot"></i> å¡«å……æ ·å¼</div>
<ul class="aside-wrap plr10">
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="colorFill.html" class="block">
颜色填充
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="linearGradient.html" class="block">
线性æ¸å˜
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="radialGradient.html" class="block">
径å‘æ¸å˜
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="Pattern.html" class="block">
图案
</a>
</li>
</ul>
<div class="p10 bold"><i class="iconfont icon-dot"></i> 图åƒ</div>
<ul class="aside-wrap plr10">
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="drawImage.html" class="block">
绘制图åƒ
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="imageSize" class="block">
图åƒå¤§å°
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="imageCrop.html" class="block">
图åƒè£å‰ª
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="imageLoader.html" class="block">
图åƒåŠ 载器
</a>
</li>
</ul>
<div class="p10 bold"><i class="iconfont icon-dot"></i> 文本</div>
<ul class="aside-wrap plr10">
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="text.html" class="block">
å—体ã€å¤§å°å’Œæ ·å¼
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="textColor.html" class="block">
文本颜色
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="textStroke.html" class="block">
文本笔划
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="textAlign.html" class="block">
文本对é½
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="textBaseline.html" class="block">
文本基线
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="textMetrics.html" class="block">
文本度é‡
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="textWrap.html" class="block">
文本æ¢è¡Œç¬¦
</a>
</li>
</ul>
<div class="p10 bold"><i class="iconfont icon-dot"></i> 转æ¢</div>
<ul class="aside-wrap plr10">
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="translate.html" class="block">
转æ¢
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="scale.html" class="block">
比例
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="rotate.html" class="block">
旋转
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="customTransform.html" class="block">
自定义å˜æ¢
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="Shear.html" class="block">
剪切
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="mirror.html" class="block">
é•œå
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="resetTransform.html" class="block">
é‡ç½®å˜æ¢
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="stateStack.html" class="block">
状æ€å †æ ˆ
</a>
</li>
</ul>
<div class="p10 bold"><i class="iconfont icon-dot"></i> å¤åˆææ–™</div>
<ul class="aside-wrap plr10">
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="shadows.html" class="block">
阴影
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="globalAlpha.html" class="block">
全局Alpha
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="clippingRegion.html" class="block">
剪è£åŒºåŸŸ
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="operations.html" class="block">
æ“作
</a>
</li>
</ul>
<div class="p10 bold"><i class="iconfont icon-dot"></i> 图åƒæ•°æ®å’ŒURL</div>
<ul class="aside-wrap plr10">
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="imageData.html" class="block">
图åƒæ•°æ®
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="invertColors.html" class="block">
å色
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="grayscale.html" class="block">
ç°åº¦
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="getDataURL.html" class="block">
获å–æ•°æ®URL
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="loadDataURL.html" class="block">
åŠ è½½æ•°æ®URL
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="saveDrawing.html" class="block">
ä¿å˜ç»˜å›¾
</a>
</li>
</ul>
<div class="p10 bold"><i class="iconfont icon-dot"></i> 动画</div>
<ul class="aside-wrap plr10">
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="clearCanvas.html" class="block">
清除画布
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="animationFrames.html" class="block">
动画帧
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="linearMotion.html" class="block">
线性è¿åŠ¨
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="acceleration.html" class="block">
åŠ å¿«
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="oscillation.html" class="block">
振è¡
</a>
</li>
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="startAndStop.html" class="block">
å¯åŠ¨å’Œåœæ¢
</a>
</li>
</ul>
<div class="p10 bold"><i class="iconfont icon-dot"></i> é¼ æ ‡æ£€æµ‹</div>
<ul class="aside-wrap plr10">
<li class="relative pl10 align_left font14" style="line-height: 32px;">
<a href="mouseCoordinates.html" class="block">
é¼ æ ‡åæ ‡
</a>
</li>
</ul>
</div> </div>
<div class="module-wrap m0" style="flex: 1">
<div class="module-head bd-0">
<h3 class="cl-666">图åƒå¤§å°</h3>
</div>
<div class="module-content plr15">
<!--内容-->
<div class="demo-content p0 absolute">
<div class="left">
<!-- Nav tabs -->
<div class="p15" role="tablist">
<span
role="presentation"
class="active cl-999"
style="padding: 10px"
>代ç </span
>
<span
> <a id="run">è¿è¡Œ</a> </span
>
</div>
<div class="tab-content">
<div
role="tabpanel"
class="tab-pane active"
id="home"
style="padding: 1px"
>
<textarea
id="htmlcode"
placeholder="把代ç 粘贴到æ¤å¤„，点击è¿è¡Œè¿›è¡Œè°ƒè¯•ï¼Œä½ 也å¯ä»¥ç‚¹å‡»è°ƒè¯•ç±»åž‹é€‰æ‹©ä½ è¦è°ƒè¯•çš„å†…å®¹ï¼Œç›¸å…³æ–‡ä»¶ç±»åº“ä½ å¯ä»¥å¼•ç”¨ç½‘络上类库。"
style="color: #999"
class="p15"
>
<!DOCTYPE HTML>
<html>
<head>
<title>图åƒå¤§å°</title>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 188;
var y = 30;
var width = 200;
var height = 137;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>
</html></textarea
>
</div>
</div>
</div>
<div class="right">
<iframe
id="preview"
name="preview"
src="http://www.yunxi10.com/html/demo/demo.html"
style="border: 0px; width: 100%; height: 100%"
></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>