织梦模板建站、织梦仿站，推荐选跟版网(专业织梦模板定制下载站)，您可以把织梦模板网：
亲，跟版网是专业的DEDECMS模板下载和定制开发服务商！您可以选择或者
html5的画布canvas——画出简单的矩形、三角形实例代码
& &以下内容您可能感兴趣： &
首先在html页面中放置一个canvas元素，其中canvas元素应该具备三个属性ID、width、height。 代码如下: &canvas id="demo" width="600" height="600"&&/canvas& 取得canvas对象并取得上下文var cxt=document.getElementById('demo').getContext(&2d&);其中参数2d是确定的。 开始绘制，有两种形式，一种是描边（fill），一种是填充（stroke）。 javascript代码： 代码如下: &script language="javascript"& var cxt=document.getElementById('demo').getContext("2d"); cxt.beginPath(); cxt.fillStyle="#F00";/*设置填充颜色*/ cxt.fillRect(0,0,200,100);/*绘制一个矩形，前两个参数决定开始位置，后两个分别是矩形的宽和高*/ cxt.beginPath(); cxt.strokeStyle="#000";/*设置边框*/ cxt.lineWidth=3;/*边框的宽度*/ cxt.strokeRect(0,120,200,100); cxt.beginPath(); cxt.moveTo(0,350); cxt.lineTo(100,250); cxt.lineTo(200,300); cxt.closePath();/*可选步骤，关闭绘制的路径*/ cxt.stroke(); &/script& 效果图：
跟版网-专业织梦模板下载平台，转载请注明出处：
& &精心为您推荐： &
& &邀您关注： &
扫描左侧二维码即可在手机端访问此页面
扫描左侧二维码即可关注跟版网官方微信公众号，获取金币模板，还可以免费仿站哦！
扫描左侧二维码即可加入跟版网官方群，免费获取金币资源并可以与其他织梦高手共同交流学习
跟版网率先实现织梦的三网合一网站，从即日起（）日，跟版网会陆续免费分享一批金币资源给需要的朋友，关注本站认证官方微信公众账号并回复相应的提取码，系统会自动将下载地址发送给您，同时这些金币资源也会分享在官方的QQ群中，欢迎各位朋友踊跃加入。另外本站后期会每周选择大家比较喜欢的网站仿制，并免费分享给大家，还有免费送金币活动哦！
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
- dede源码分享
售价:20金币
- dede源码分享
售价:40金币
- dede源码分享
售价:20金币
- dede源码分享
售价:0金币
- dede源码分享
售价:0金币
& & & 跟版网竭力打造中国最大的织梦源码和织梦模板商城，我们有一批经验丰富的设计师和程序员，发展五年，跟版网拥有丰富的织梦模板，欢迎您的咨询，我们将竭诚为您提供最优质的服务。
& & & 跟版网织梦源码商城坚持“创意+品质+服务”的高端理念，运用创意设计的理念为您塑造高品质的网络品牌形象。凭借五年的探索和实践，跟版网织梦源码商城拥有一支经验丰富、技术精湛、尽职尽责的网络服务团队。精品网站建设，从跟版网织梦源码商城建站开始。
& & & 跟版网织梦源码和模板可分为两种形式获得，一种是官方源码，另外一种是会员共享源码。两种源码都分为免费和收费两种形式。
& & & 跟版网官方收费源码可通过支付费用获得，具体操作流程可查看网址：。会员共享源码可通过共享模板获取金币下载。如觉得麻烦，可以联系客服QQ：进行金币充值，充值后可随意下载。1785人阅读
HTML5.CSS3（46）
&/pre&&pre name=&code& class=&html&&&!doctype html&
&head&&/head&
&canvas width=&800& height=&800& style=&background:#888&
id=&canvas&&
您的浏览器当前版本不支持canvas标签
//获取画布DOM
还不可以操作
var canvas=document.getElementById('canvas');
//设置绘图环境
var cxt=canvas.getContext('2d');
//画一条线段。
cxt.beginPath(); //开启新路径
cxt.lineWidth=10; //设定画笔的宽度
cxt.strokeStyle=&red&; //设置画笔的颜色
cxt.moveTo(20,20); //设定笔触的位置
cxt.lineTo(100,20); //设置移动的方式
cxt.stroke();
cxt.closePath(); //封闭路径
//画一个空心圆形
凡是路径图形必须先开始路径，画完图之后必须结束路径
cxt.beginPath();
cxt.lineWidth=3; //重新设置画笔
cxt.strokeStyle=&green&;
cxt.arc(200,200,50,0,360,false);
cxt.stroke();
cxt.closePath();
//画一个实心圆形
cxt.beginPath();
cxt.fillStyle=&rgb(255,0,0)&; //设置填充的颜色
cxt.arc(200,100,50,0,360,false);
cxt.fill();
cxt.stroke();
cxt.closePath();
//画一个矩形
cxt.beginPath();
cxt.rect(300,20,100,100);
cxt.stroke();
cxt.closePath();
cxt.strokeRect(300,150,100,100); //其他方法 建议使用此方式
//实心矩形
cxt.beginPath();
cxt.rect(300,270,100,100);
cxt.fill();
cxt.closePath();
cxt.fillRect(300,390,100,100);
//设置文字
cxt.font=&40px 宋体&; //css font属性
cxt.fillText(&canvas&,20,300);
cxt.lineWidth=1;
//将笔触设置为1像素
cxt.strokeText(&canvas&,20,350);
//画图 把一幅图片画到画布中
注意webkit内核的浏览器 chrome和猎豹不支持
var img =new Image();
img.src=&xiaomm.jpg&;
cxt.drawImage(img,20,370,230,306);
//画一个三角形
cxt.beginPath();
cxt.moveTo(300,500); //移动至开始点
cxt.lineTo(300,600);
cxt.lineTo(400,550);
cxt.closePath();//填充或者画路径需要先闭合路径再画
cxt.stroke();
cxt.beginPath();
cxt.moveTo(300,600); //移动至开始点
cxt.lineTo(300,700);
cxt.lineTo(400,650);
cxt.closePath();
cxt.fill();
//旋转条形
//设置旋转环境
cxt.save();
cxt.translate(10,10); //在异次元空间重置0,0点的位置
cxt.rotate(-350*Math.PI/180); //设置旋转角度
参数是弧度
角度 0-360 弧度=角度*Math.PI/180
cxt.lineWidth=10; //旋转一个线段
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(20,100);
cxt.stroke();
cxt.closePath();
//将旋转之后的元素放回原画布
cxt.restore();
//旋转图片
cxt.save();
cxt.translate(20,370);
cxt.rotate(-50*Math.PI/180);
var img = new Image();
img.src=&ccc.jpg&;
cxt.drawImage(img,0,0,230,306);
cxt.restore();
//上面代码会产生一个小圆点，每隔30毫秒就向右下方移动的效果。setInterval函数的一开始，之所以要将画布重新渲染黑色底色，是为了抹去上一步的小圆点先上升后下降
var posX = 20,
posY = 100;
setInterval(function() {
cxt.fillStyle = &black&;
cxt.fillRect(0,0,canvas.width, canvas.height);
posX += 1;
posY += 0.25;
cxt.beginPath();
cxt.fillStyle = &white&;
cxt.arc(posX, posY, 10, 0, Math.PI*2, true);
cxt.closePath();
cxt.fill();
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：490414次
积分：6774
积分：6774
排名：第2773名
原创：235篇
译文：57篇
评论：53条
(3)(3)(2)(3)(2)(1)(1)(8)(9)(5)(1)(2)(2)(5)(12)(7)(2)(1)(3)(4)(2)(1)(2)(11)(8)(17)(4)(15)(10)(5)(27)(23)(13)(6)(1)(1)(2)(2)(1)(1)(3)(2)(2)(3)(2)(11)(6)(7)(7)(11)(9)(6)(6)(1)(3)(1)线条样式属性
lineCap& && &&&设置或返回线条的结束端点样式
butt & & & & 默认。向线条的每个末端添加平直的边缘。
round & & & & 向线条的每个末端添加圆形线帽。
square & & & & 向线条的每个末端添加正方形线帽。
lineJoin& && &&&设置或返回两条线相交时，所创建的拐角类型
bevel & & & & 创建斜角。
round & & & & 创建圆角。
miter & & & & 默认。创建尖角。
lineWidth& && &&&设置或返回当前的线条宽度
number & & & & 当前线条的宽度，以像素计
miterLimit& && &&&设置或返回最大斜接长度
number & & & & 正数。规定最大斜接长度。
& & & & & & & &&&& 如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。
&canvas id="c" width="500" height="450" style="border:1px solid #000"&&/canvas&
&script type="text/javascript"&
var a=document.getElementById("c");
var ctx=a.getContext("2d");
ctx.beginPath();
//起始一条路径，或重置当前路径
ctx.moveTo(20,20);
//把路径移动到画布中的指定点，不创建线条
ctx.lineTo(200,20);
//添加一个新点，然后在画布中创建从该点到最后指定点的线条
ctx.lineWidth=5;
//设置或返回当前的线条宽度
ctx.lineCap="round";
//向线条的每个末端添加圆形线帽。
ctx.strokeStyle="green";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(20,40);
ctx.lineTo(200,40);
ctx.lineWidth=5;
//设置或返回当前的线条宽度
ctx.lineCap="butt";
//默认。向线条的每个末端添加平直的边缘。
ctx.strokeStyle="blue";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(20,60);
ctx.lineTo(200,60);
ctx.lineWidth=5;
//设置或返回当前的线条宽度
ctx.lineCap="square";
//向线条的每个末端添加正方形线帽。
ctx.strokeStyle="yellow";
ctx.stroke();
ctx.beginPath();
ctx.lineJoin="round";
//设置或返回两条线相交时，所创建的拐角类型
ctx.moveTo(20,80);
ctx.lineTo(50,100);
ctx.lineTo(20,120);
ctx.lineWidth=20;
ctx.strokeStyle="red";
ctx.stroke();
ctx.beginPath();
ctx.lineJoin="bevel";
ctx.moveTo(120,80);
ctx.lineTo(150,100);
ctx.lineTo(120,120);
ctx.lineWidth=20;
ctx.strokeStyle="red";
ctx.stroke();
ctx.beginPath();
ctx.lineJoin="miter";
ctx.moveTo(220,80);
ctx.lineTo(250,100);
ctx.lineTo(220,120);
ctx.lineWidth=20;
ctx.strokeStyle="red";
ctx.stroke();
ctx.beginPath();
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=5;
//设置或返回最大斜接长度,斜接长度指的是在两条线交汇处内角和外角之间的距离
ctx.moveTo(20,150);
ctx.lineTo(50,157);
ctx.lineTo(20,164);
ctx.stroke();
阅读(...) 评论()