继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

学习canvas,记录canvas的API

奋斗奋斗坑
关注TA
已关注
手记 14
粉丝 19
获赞 132
var canvasDom = document.getElementById("canvas");

// 获取canvas上下文
var context = canvasDom.getContext("2d");
// 画笔的起点
context.moveTo(100,100);
// 画笔画至的点
context.lineTo(700,700);
// 绘制
context.stroke();
// 开始新的图形画起
context.beginPath();
// 封闭图形(与beginPath配对使用)
context.closePath();
/******/
var image = new Image();
image.src = "...";
image.onload = function(){
     // drawImage(image,100,100)指定图片原有的尺寸平铺在画布上
     //context.drawImage(image,100,100);

     // drawImage(image,0,0,canvas.width,canvas.height)使图片铺满画布
     //context.drawImage(image,0,0,canvas.width,canvas.height);

     // drawImage(image,50,50,200,200,300,300,500,500);指定图片中的某部分(50,50,200,200)平铺在画布的某位置上(300,300,500,500)
     context.drawImage(image,50,50,200,200,300,300,500,500);
}
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP